@memberjunction/ng-dashboards 5.11.0 → 5.13.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 (229) hide show
  1. package/dist/AI/components/agents/agent-configuration.component.d.ts +34 -2
  2. package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
  3. package/dist/AI/components/agents/agent-configuration.component.js +586 -223
  4. package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
  5. package/dist/AI/components/agents/agent-editor.component.js +2 -2
  6. package/dist/AI/components/agents/agent-filter-panel.component.d.ts +8 -0
  7. package/dist/AI/components/agents/agent-filter-panel.component.d.ts.map +1 -1
  8. package/dist/AI/components/agents/agent-filter-panel.component.js +85 -52
  9. package/dist/AI/components/agents/agent-filter-panel.component.js.map +1 -1
  10. package/dist/AI/components/charts/performance-heatmap.component.d.ts +1 -0
  11. package/dist/AI/components/charts/performance-heatmap.component.d.ts.map +1 -1
  12. package/dist/AI/components/charts/performance-heatmap.component.js +27 -5
  13. package/dist/AI/components/charts/performance-heatmap.component.js.map +1 -1
  14. package/dist/AI/components/charts/time-series-chart.component.d.ts +5 -0
  15. package/dist/AI/components/charts/time-series-chart.component.d.ts.map +1 -1
  16. package/dist/AI/components/charts/time-series-chart.component.js +23 -8
  17. package/dist/AI/components/charts/time-series-chart.component.js.map +1 -1
  18. package/dist/AI/components/execution-monitoring.component.js +2 -2
  19. package/dist/AI/components/execution-monitoring.component.js.map +1 -1
  20. package/dist/AI/components/models/model-management.component.js +2 -2
  21. package/dist/AI/components/prompts/model-prompt-priority-matrix.component.js +2 -2
  22. package/dist/AI/components/prompts/prompt-filter-panel.component.js +2 -2
  23. package/dist/AI/components/prompts/prompt-management.component.js +3 -3
  24. package/dist/AI/components/prompts/prompt-management.component.js.map +1 -1
  25. package/dist/AI/components/prompts/prompt-version-control.component.js +2 -2
  26. package/dist/AI/components/requests/agent-requests-resource.component.d.ts +83 -0
  27. package/dist/AI/components/requests/agent-requests-resource.component.d.ts.map +1 -0
  28. package/dist/AI/components/requests/agent-requests-resource.component.js +547 -0
  29. package/dist/AI/components/requests/agent-requests-resource.component.js.map +1 -0
  30. package/dist/AI/components/system/system-config-filter-panel.component.js +2 -2
  31. package/dist/AI/components/system/system-configuration.component.js +2 -2
  32. package/dist/AI/components/widgets/kpi-card.component.js +7 -7
  33. package/dist/AI/components/widgets/kpi-card.component.js.map +1 -1
  34. package/dist/AI/components/widgets/live-execution-widget.component.d.ts.map +1 -1
  35. package/dist/AI/components/widgets/live-execution-widget.component.js +6 -6
  36. package/dist/AI/components/widgets/live-execution-widget.component.js.map +1 -1
  37. package/dist/AI/index.d.ts +1 -0
  38. package/dist/AI/index.d.ts.map +1 -1
  39. package/dist/AI/index.js +2 -0
  40. package/dist/AI/index.js.map +1 -1
  41. package/dist/APIKeys/api-applications-panel.component.js +3 -3
  42. package/dist/APIKeys/api-applications-panel.component.js.map +1 -1
  43. package/dist/APIKeys/api-key-create-dialog.component.js +3 -3
  44. package/dist/APIKeys/api-key-create-dialog.component.js.map +1 -1
  45. package/dist/APIKeys/api-key-edit-panel.component.js +1 -1
  46. package/dist/APIKeys/api-key-edit-panel.component.js.map +1 -1
  47. package/dist/APIKeys/api-key-list.component.js +3 -3
  48. package/dist/APIKeys/api-key-list.component.js.map +1 -1
  49. package/dist/APIKeys/api-keys-resource.component.js +1 -1
  50. package/dist/APIKeys/api-keys-resource.component.js.map +1 -1
  51. package/dist/APIKeys/api-scopes-panel.component.js +2 -2
  52. package/dist/APIKeys/api-usage-panel.component.js +2 -2
  53. package/dist/Actions/components/actions-overview.component.js +2 -2
  54. package/dist/Actions/components/execution-monitoring.component.js +2 -2
  55. package/dist/Actions/components/explorer/action-breadcrumb.component.js +2 -2
  56. package/dist/Actions/components/explorer/action-card.component.js +2 -2
  57. package/dist/Actions/components/explorer/action-explorer.component.js +2 -2
  58. package/dist/Actions/components/explorer/action-list-item.component.js +2 -2
  59. package/dist/Actions/components/explorer/action-toolbar.component.js +2 -2
  60. package/dist/Actions/components/explorer/action-tree-panel.component.js +2 -2
  61. package/dist/Actions/components/explorer/new-action-panel.component.js +2 -2
  62. package/dist/Actions/components/explorer/new-action-panel.component.js.map +1 -1
  63. package/dist/Actions/components/explorer/new-category-panel.component.js +2 -2
  64. package/dist/Actions/components/explorer/new-category-panel.component.js.map +1 -1
  65. package/dist/Communication/communication-dashboard.component.js +2 -2
  66. package/dist/Communication/communication-logs-resource.component.d.ts.map +1 -1
  67. package/dist/Communication/communication-logs-resource.component.js +3 -3
  68. package/dist/Communication/communication-logs-resource.component.js.map +1 -1
  69. package/dist/Communication/communication-monitor-resource.component.d.ts.map +1 -1
  70. package/dist/Communication/communication-monitor-resource.component.js +5 -5
  71. package/dist/Communication/communication-monitor-resource.component.js.map +1 -1
  72. package/dist/Communication/communication-providers-resource.component.d.ts.map +1 -1
  73. package/dist/Communication/communication-providers-resource.component.js +3 -3
  74. package/dist/Communication/communication-providers-resource.component.js.map +1 -1
  75. package/dist/Communication/communication-runs-resource.component.d.ts.map +1 -1
  76. package/dist/Communication/communication-runs-resource.component.js +3 -3
  77. package/dist/Communication/communication-runs-resource.component.js.map +1 -1
  78. package/dist/Communication/communication-templates-resource.component.js +2 -2
  79. package/dist/Communication/communication-templates-resource.component.js.map +1 -1
  80. package/dist/ComponentStudio/component-studio-dashboard.component.js +2 -2
  81. package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js +2 -2
  82. package/dist/ComponentStudio/components/artifact-load-dialog.component.js +2 -2
  83. package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +2 -2
  84. package/dist/ComponentStudio/components/browser/component-browser.component.js +2 -2
  85. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +2 -2
  86. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js.map +1 -1
  87. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +2 -2
  88. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map +1 -1
  89. package/dist/ComponentStudio/components/editors/requirements-editor.component.js +2 -2
  90. package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map +1 -1
  91. package/dist/ComponentStudio/components/editors/spec-editor.component.js +2 -2
  92. package/dist/ComponentStudio/components/editors/spec-editor.component.js.map +1 -1
  93. package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +2 -2
  94. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +2 -2
  95. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js.map +1 -1
  96. package/dist/ComponentStudio/components/text-import-dialog.component.js +2 -2
  97. package/dist/ComponentStudio/components/text-import-dialog.component.js.map +1 -1
  98. package/dist/ComponentStudio/components/workspace/component-preview.component.js +2 -2
  99. package/dist/ComponentStudio/components/workspace/editor-tabs.component.js +2 -2
  100. package/dist/ComponentStudio/components/workspace/editor-tabs.component.js.map +1 -1
  101. package/dist/Credentials/components/credentials-audit-resource.component.js +9 -9
  102. package/dist/Credentials/components/credentials-audit-resource.component.js.map +1 -1
  103. package/dist/Credentials/components/credentials-categories-resource.component.d.ts.map +1 -1
  104. package/dist/Credentials/components/credentials-categories-resource.component.js +11 -3
  105. package/dist/Credentials/components/credentials-categories-resource.component.js.map +1 -1
  106. package/dist/Credentials/components/credentials-list-resource.component.js +2 -2
  107. package/dist/Credentials/components/credentials-overview-resource.component.d.ts.map +1 -1
  108. package/dist/Credentials/components/credentials-overview-resource.component.js +12 -11
  109. package/dist/Credentials/components/credentials-overview-resource.component.js.map +1 -1
  110. package/dist/Credentials/components/credentials-types-resource.component.js +9 -9
  111. package/dist/Credentials/components/credentials-types-resource.component.js.map +1 -1
  112. package/dist/Credentials/credentials-dashboard.component.js +2 -2
  113. package/dist/DashboardBrowser/dashboard-browser-resource.component.js +2 -2
  114. package/dist/DashboardBrowser/dashboard-share-dialog.component.js +2 -2
  115. package/dist/DataExplorer/components/filter-dialog/filter-dialog.component.js +2 -2
  116. package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js +2 -2
  117. package/dist/DataExplorer/components/view-selector/view-selector.component.js +2 -2
  118. package/dist/DataExplorer/data-explorer-dashboard.component.js +4 -4
  119. package/dist/DataExplorer/data-explorer-dashboard.component.js.map +1 -1
  120. package/dist/Home/home-dashboard.component.js +2 -2
  121. package/dist/Integration/components/activity/activity.component.d.ts +1 -1
  122. package/dist/Integration/components/activity/activity.component.d.ts.map +1 -1
  123. package/dist/Integration/components/activity/activity.component.js +5 -5
  124. package/dist/Integration/components/activity/activity.component.js.map +1 -1
  125. package/dist/Integration/components/connections/connections.component.d.ts +31 -2
  126. package/dist/Integration/components/connections/connections.component.d.ts.map +1 -1
  127. package/dist/Integration/components/connections/connections.component.js +753 -412
  128. package/dist/Integration/components/connections/connections.component.js.map +1 -1
  129. package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js +3 -3
  130. package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js.map +1 -1
  131. package/dist/Integration/components/overview/overview.component.d.ts +0 -1
  132. package/dist/Integration/components/overview/overview.component.d.ts.map +1 -1
  133. package/dist/Integration/components/overview/overview.component.js +3 -6
  134. package/dist/Integration/components/overview/overview.component.js.map +1 -1
  135. package/dist/Integration/components/pipelines/pipelines.component.js +3 -3
  136. package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
  137. package/dist/Integration/components/schedules/schedules.component.d.ts +20 -0
  138. package/dist/Integration/components/schedules/schedules.component.d.ts.map +1 -1
  139. package/dist/Integration/components/schedules/schedules.component.js +97 -5
  140. package/dist/Integration/components/schedules/schedules.component.js.map +1 -1
  141. package/dist/Integration/components/visual-editor/visual-editor.component.js +2 -2
  142. package/dist/Integration/components/widgets/integration-card.component.d.ts.map +1 -1
  143. package/dist/Integration/components/widgets/integration-card.component.js +5 -1
  144. package/dist/Integration/components/widgets/integration-card.component.js.map +1 -1
  145. package/dist/Integration/components/widgets/run-history-panel.component.js +2 -2
  146. package/dist/Integration/components/widgets/run-history-panel.component.js.map +1 -1
  147. package/dist/Integration/integration.module.d.ts +2 -1
  148. package/dist/Integration/integration.module.d.ts.map +1 -1
  149. package/dist/Integration/integration.module.js +7 -3
  150. package/dist/Integration/integration.module.js.map +1 -1
  151. package/dist/Integration/services/integration-data.service.d.ts +27 -2
  152. package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
  153. package/dist/Integration/services/integration-data.service.js +107 -4
  154. package/dist/Integration/services/integration-data.service.js.map +1 -1
  155. package/dist/Lists/components/lists-browse-resource.component.d.ts.map +1 -1
  156. package/dist/Lists/components/lists-browse-resource.component.js +25 -24
  157. package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
  158. package/dist/Lists/components/lists-categories-resource.component.js +2 -2
  159. package/dist/Lists/components/lists-categories-resource.component.js.map +1 -1
  160. package/dist/Lists/components/lists-my-lists-resource.component.d.ts.map +1 -1
  161. package/dist/Lists/components/lists-my-lists-resource.component.js +26 -25
  162. package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
  163. package/dist/Lists/components/lists-operations-resource.component.js +2 -2
  164. package/dist/Lists/components/lists-operations-resource.component.js.map +1 -1
  165. package/dist/Lists/components/venn-diagram/venn-diagram.component.js +3 -3
  166. package/dist/Lists/components/venn-diagram/venn-diagram.component.js.map +1 -1
  167. package/dist/MCP/components/mcp-connection-dialog.component.js +2 -2
  168. package/dist/MCP/components/mcp-log-detail-panel.component.js +2 -2
  169. package/dist/MCP/components/mcp-log-detail-panel.component.js.map +1 -1
  170. package/dist/MCP/components/mcp-server-dialog.component.js +2 -2
  171. package/dist/MCP/components/mcp-test-tool-dialog.component.js +2 -2
  172. package/dist/MCP/components/mcp-test-tool-dialog.component.js.map +1 -1
  173. package/dist/MCP/mcp-dashboard.component.js +2 -2
  174. package/dist/MCP/mcp-filter-panel.component.js +2 -2
  175. package/dist/QueryBrowser/query-browser-resource.component.js +7 -7
  176. package/dist/QueryBrowser/query-browser-resource.component.js.map +1 -1
  177. package/dist/Scheduling/components/index.d.ts +0 -1
  178. package/dist/Scheduling/components/index.d.ts.map +1 -1
  179. package/dist/Scheduling/components/index.js +0 -1
  180. package/dist/Scheduling/components/index.js.map +1 -1
  181. package/dist/Scheduling/components/scheduling-activity.component.js +2 -2
  182. package/dist/Scheduling/components/scheduling-jobs.component.d.ts +6 -9
  183. package/dist/Scheduling/components/scheduling-jobs.component.d.ts.map +1 -1
  184. package/dist/Scheduling/components/scheduling-jobs.component.js +118 -110
  185. package/dist/Scheduling/components/scheduling-jobs.component.js.map +1 -1
  186. package/dist/Scheduling/components/scheduling-overview.component.js +3 -3
  187. package/dist/Scheduling/components/scheduling-overview.component.js.map +1 -1
  188. package/dist/Scheduling/scheduling-dashboard.component.js +2 -2
  189. package/dist/SystemDiagnostics/system-diagnostics.component.js +4 -4
  190. package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
  191. package/dist/Testing/components/testing-analytics.component.js +2 -2
  192. package/dist/Testing/components/testing-analytics.component.js.map +1 -1
  193. package/dist/Testing/components/testing-dashboard-tab.component.js +4 -4
  194. package/dist/Testing/components/testing-dashboard-tab.component.js.map +1 -1
  195. package/dist/Testing/components/testing-explorer.component.js +2 -2
  196. package/dist/Testing/components/testing-explorer.component.js.map +1 -1
  197. package/dist/Testing/components/testing-review.component.d.ts.map +1 -1
  198. package/dist/Testing/components/testing-review.component.js +5 -5
  199. package/dist/Testing/components/testing-review.component.js.map +1 -1
  200. package/dist/Testing/components/testing-runs.component.js +2 -2
  201. package/dist/Testing/components/testing-runs.component.js.map +1 -1
  202. package/dist/Testing/components/widgets/oracle-breakdown-table.component.js +2 -2
  203. package/dist/Testing/components/widgets/oracle-breakdown-table.component.js.map +1 -1
  204. package/dist/Testing/components/widgets/suite-tree.component.js +4 -4
  205. package/dist/Testing/components/widgets/suite-tree.component.js.map +1 -1
  206. package/dist/Testing/components/widgets/test-run-detail-panel.component.js +2 -2
  207. package/dist/Testing/components/widgets/test-run-detail-panel.component.js.map +1 -1
  208. package/dist/Testing/testing-dashboard.component.js +2 -2
  209. package/dist/VersionHistory/components/diff-resource.component.js +2 -2
  210. package/dist/VersionHistory/components/graph-resource.component.js +2 -2
  211. package/dist/VersionHistory/components/labels-resource.component.js +3 -3
  212. package/dist/VersionHistory/components/labels-resource.component.js.map +1 -1
  213. package/dist/VersionHistory/components/restore-resource.component.js +3 -3
  214. package/dist/VersionHistory/components/restore-resource.component.js.map +1 -1
  215. package/dist/__tests__/integration-data-service.test.js +1 -0
  216. package/dist/__tests__/integration-data-service.test.js.map +1 -1
  217. package/dist/module.d.ts +52 -49
  218. package/dist/module.d.ts.map +1 -1
  219. package/dist/module.js +25 -6
  220. package/dist/module.js.map +1 -1
  221. package/dist/public-api.d.ts +1 -1
  222. package/dist/public-api.d.ts.map +1 -1
  223. package/dist/public-api.js +1 -1
  224. package/dist/public-api.js.map +1 -1
  225. package/package.json +42 -40
  226. package/dist/Scheduling/components/job-slideout.component.d.ts +0 -45
  227. package/dist/Scheduling/components/job-slideout.component.d.ts.map +0 -1
  228. package/dist/Scheduling/components/job-slideout.component.js +0 -459
  229. package/dist/Scheduling/components/job-slideout.component.js.map +0 -1
package/dist/Integration/components/pipelines/pipelines.component.js CHANGED
@@ -2011,7 +2011,7 @@ let PipelinesComponent = class PipelinesComponent extends BaseResourceComponent
2011
2011
  return summary.SourceType.IconClass;
2012
2012
  }
2013
2013
  const name = summary.Integration.Integration ?? summary.Integration.Name;
2014
- return ResolveIntegrationIcon(name);
2014
+ return ResolveIntegrationIcon(name, summary.Icon);
2015
2015
  }
2016
2016
  statusToColor(color) {
2017
2017
  if (color === 'green')
@@ -2039,7 +2039,7 @@ let PipelinesComponent = class PipelinesComponent extends BaseResourceComponent
2039
2039
  } if (rf & 2) {
2040
2040
  i0.ɵɵadvance();
2041
2041
  i0.ɵɵconditional(!ctx.VisualEditorOpen ? 1 : 2);
2042
- } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n\n\n\n\n\n.pipelines-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-page);\n position: relative;\n overflow: hidden;\n}\n\n\n\n\n\n\n.pipelines-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n z-index: 10;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.toolbar-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.toolbar-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 22px;\n height: 22px;\n padding: 0 6px;\n border-radius: 11px;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 11px;\n font-weight: 600;\n}\n\n.toolbar-map-count[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.global-search[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 10px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n pointer-events: none;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 240px;\n height: 32px;\n padding: 0 12px 0 30px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-color-indigo-500);\n background: var(--mj-bg-surface);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 13px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-color-neutral-300);\n color: var(--mj-text-primary);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n\n\n\n\n\n.pipelines-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0;\n}\n\n.content-loading[_ngcontent-%COMP%], \n.content-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n}\n\n.content-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { font-size: 14px; }\n.content-empty[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n\n\n\n\n\n.cards-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n box-sizing: border-box;\n min-height: 0;\n}\n\n\n\n\n\n\n.pipeline-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card[_ngcontent-%COMP%]:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-color-indigo-100);\n box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 18px;\n cursor: pointer;\n user-select: none;\n transition: background 150ms ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover { background: var(--mj-bg-page); }\n\n.card-header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n flex: 1;\n}\n\n.card-status-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon[_ngcontent-%COMP%] {\n font-size: 18px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n width: 24px;\n text-align: center;\n}\n\n.card-info[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-meta[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep[_ngcontent-%COMP%] { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n flex-shrink: 0;\n}\n\n.card-status-label[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; }\n.card-last-sync[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); }\n\n\n\n.mini-flow[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.mini-flow-line[_ngcontent-%COMP%] { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count[_ngcontent-%COMP%] {\n font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n\n\n\n\n\n.card-body[_ngcontent-%COMP%] {\n border-top: 1px solid var(--mj-border-subtle);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n \n\n\n max-height: 60vh;\n}\n\n\n\n.card-search-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.card-search-icon[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-search-input[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.card-search-input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n\n\n.map-table-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 6px 18px;\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n border-bottom: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n\n\n.map-table-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n}\n\n.map-table-empty[_ngcontent-%COMP%] {\n padding: 24px 18px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n\n\n\n\n.map-col-source[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction[_ngcontent-%COMP%] { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta[_ngcontent-%COMP%] { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n\n\n.map-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 18px;\n font-size: 13px;\n color: var(--mj-color-neutral-700);\n cursor: pointer;\n transition: background 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled[_ngcontent-%COMP%] { opacity: 0.55; }\n.map-row.sync-disabled[_ngcontent-%COMP%]:hover { opacity: 0.8; }\n\n\n\n\n.map-config-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n.map-edit-hint[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n color: var(--mj-color-neutral-300);\n font-size: 11px;\n transition: color 150ms ease;\n}\n\n.map-row[_ngcontent-%COMP%]:hover .map-edit-hint[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n\n\n\n\n\n.map-col-toggle[_ngcontent-%COMP%] {\n width: 50px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sync-toggle[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}\n\n.sync-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%] {\n width: 30px;\n height: 16px;\n border-radius: 8px;\n background: var(--mj-color-neutral-300);\n position: relative;\n transition: background 200ms ease;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--mj-bg-surface);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n transition: transform 200ms ease;\n}\n\n.sync-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .sync-toggle-track[_ngcontent-%COMP%] {\n background: var(--mj-color-success-600);\n}\n\n.sync-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .sync-toggle-track[_ngcontent-%COMP%]::after {\n transform: translateX(14px);\n}\n\n\n\n\n\n\n.direction-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 20px;\n padding: 0 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n flex-shrink: 0;\n}\n\n.direction-badge.pull[_ngcontent-%COMP%] { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n\n\n\n\n\n.ve-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n background: var(--mj-bg-surface);\n animation: _ngcontent-%COMP%_slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from { opacity: 0; transform: translateX(30px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n\n\n\n.ve-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 16px;\n}\n\n.ve-header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.ve-back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 14px;\n flex-shrink: 0;\n transition: all 150ms ease;\n}\n\n.ve-back-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n min-width: 0;\n}\n\n.ve-source-label[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-direction-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label[_ngcontent-%COMP%] {\n color: var(--mj-color-success-600);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-header-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.ve-stat[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 700;\n}\n\n.ve-stat-sep[_ngcontent-%COMP%] {\n width: 1px;\n height: 14px;\n background: var(--mj-border-default);\n}\n\n.ve-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.ve-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 14px;\n border-radius: 7px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border: none;\n white-space: nowrap;\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-color-error-600);\n border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-color-success-600);\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 4px;\n animation: _ngcontent-%COMP%_fadeIn 300ms ease;\n}\n\n\n\n.ve-sync-toggle[_ngcontent-%COMP%] { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n\n\n.ve-action-sep[_ngcontent-%COMP%] {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n flex-shrink: 0;\n}\n\n\n\n.ve-btn-ghost.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n border-color: var(--mj-color-indigo-200);\n}\n\n\n\n\n\n\n.ve-preview-strip[_ngcontent-%COMP%] {\n display: flex;\n gap: 1px;\n background: var(--mj-border-default);\n border-bottom: 1px solid var(--mj-border-default);\n max-height: 220px;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.ve-preview-panel[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--mj-bg-page);\n overflow: hidden;\n}\n\n.ve-preview-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.ve-preview-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n}\n\n.ve-preview-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading[_ngcontent-%COMP%], \n.ve-preview-empty[_ngcontent-%COMP%] {\n padding: 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.ve-preview-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n font-size: 10px;\n padding: 5px 10px;\n text-align: left;\n white-space: nowrap;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 4px 10px;\n color: var(--mj-text-primary);\n border-bottom: 1px solid var(--mj-border-subtle);\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-50);\n}\n\n\n\n\n\n\n.ve-connect-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 20px;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-700);\n font-size: 13px;\n border-bottom: 1px solid var(--mj-color-indigo-100);\n flex-shrink: 0;\n}\n\n.ve-connect-banner[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { font-weight: 700; }\n\n.ve-connect-cancel[_ngcontent-%COMP%] {\n margin-left: auto;\n padding: 3px 10px;\n border: 1px solid var(--mj-color-indigo-100);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-color-indigo-700);\n font-size: 12px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-connect-cancel[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-100); }\n\n\n\n\n\n\n.ve-body[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n\n.ve-loading[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n\n\n.ve-sections-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n\n\n.ve-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section[_ngcontent-%COMP%]:not(.collapsed) {\n flex: 1;\n min-height: 0;\n}\n\n.ve-section.collapsed[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.ve-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n cursor: pointer;\n user-select: none;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n transition: background 150ms ease;\n}\n\n.ve-section-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n flex-shrink: 0;\n transition: transform 200ms ease;\n}\n\n.ve-section-title[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--mj-text-muted);\n}\n\n.ve-section-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n padding: 1px 8px;\n border-radius: 4px;\n margin-left: auto;\n}\n\n.ve-section-body[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n\n\n.ve-canvas-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n\n\n\n\n\n.ve-col-headers[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--mj-text-muted);\n}\n\n.ve-col-header.source[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.ve-col-header-spacer[_ngcontent-%COMP%] { \n }\n\n.ve-col-count[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n padding: 1px 6px;\n border-radius: 4px;\n}\n\n\n\n\n\n\n.ve-col-searches[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n padding: 6px 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 12px;\n}\n\n.ve-col-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.ve-col-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer[_ngcontent-%COMP%] { \n }\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.ve-canvas-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n position: relative;\n}\n\n\n\n\n\n\n.ve-field-col[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.ve-field-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 14px;\n font-size: 13px;\n cursor: pointer;\n transition: background 150ms ease, opacity 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n box-sizing: border-box;\n}\n\n.ve-field-item.mapped[_ngcontent-%COMP%] { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped[_ngcontent-%COMP%] {\n opacity: 0.5;\n background: var(--mj-bg-page);\n}\n\n.ve-field-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-indigo-50);\n opacity: 1;\n}\n\n.ve-field-item.connecting[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-100);\n opacity: 1;\n box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-success-100);\n box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--mj-color-neutral-700);\n font-weight: 500;\n}\n\n.ve-field-type[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 3px;\n flex-shrink: 0;\n}\n\n.ve-fbadge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 3px;\n border-radius: 4px;\n font-size: 9px;\n font-weight: 700;\n}\n\n.ve-fbadge.pk[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty[_ngcontent-%COMP%] {\n padding: 32px 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n\n\n\n\n\n.ve-svg[_ngcontent-%COMP%] {\n display: block;\n}\n\n.ve-conn-line[_ngcontent-%COMP%] {\n fill: none;\n stroke-width: 2;\n cursor: pointer;\n transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n\n\n.ve-conn-line.conn-direct[_ngcontent-%COMP%] { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line[_ngcontent-%COMP%]:hover { stroke-width: 3.5; }\n.ve-conn-line.selected[_ngcontent-%COMP%] { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n\n\n.ve-badge-fo[_ngcontent-%COMP%] { overflow: visible; }\n\n.ve-conn-badge[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct[_ngcontent-%COMP%] { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge[_ngcontent-%COMP%]:hover { transform: scale(1.2); }\n.ve-conn-badge.selected[_ngcontent-%COMP%] { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n\n\n\n\n\n.ve-transform-panel[_ngcontent-%COMP%] {\n width: 320px;\n flex-shrink: 0;\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n background: var(--mj-bg-page);\n animation: _ngcontent-%COMP%_slideInRight 200ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n from { opacity: 0; transform: translateX(20px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.ve-tp-title[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.ve-tp-close[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 26px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.ve-tp-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n\n\n.ve-tp-mapping-info[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.ve-tp-field[_ngcontent-%COMP%] {\n padding: 4px 10px;\n border-radius: 6px;\n font-weight: 600;\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 110px;\n}\n\n.ve-tp-field.source[_ngcontent-%COMP%] { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n\n\n.ve-tp-toggles[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.ve-tp-toggle-box[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-color-neutral-300);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: var(--mj-bg-surface);\n transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.ve-tp-section[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 10px;\n font-weight: 700;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 8px;\n}\n\n.ve-tp-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n padding: 6px 8px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ve-tp-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n\n\n.ve-tp-add-step[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-tp-add-step[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step[_ngcontent-%COMP%] {\n margin-top: 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n overflow: hidden;\n}\n\n.ve-tp-step-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 5px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n transition: all 150ms ease;\n flex-shrink: 0;\n}\n\n.ve-tp-remove-step[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config[_ngcontent-%COMP%] {\n padding: 8px 10px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n width: 80px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n border-top: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 6px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n font-size: 11px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-no-steps[_ngcontent-%COMP%] {\n padding: 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n font-style: italic;\n}\n\n\n\n.ve-tp-footer[_ngcontent-%COMP%] {\n padding: 14px 16px;\n margin-top: auto;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-color-neutral-300);\n border-radius: 3px;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.ve-info-body[_ngcontent-%COMP%] {\n padding: 16px;\n overflow-y: auto;\n}\n\n.ve-info-loading[_ngcontent-%COMP%] {\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n padding: 20px;\n}\n\n.ve-info-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n margin-right: 6px;\n}\n\n.ve-info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.ve-info-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 14px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n}\n\n.ve-info-card-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-100);\n color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.ve-info-card-value[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ve-info-card-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.ve-info-details[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px;\n font-size: 12px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.ve-info-detail-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.ve-info-detail-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}"] });
2042
+ } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n\n\n\n\n\n.pipelines-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-page);\n position: relative;\n overflow: hidden;\n}\n\n\n\n\n\n\n.pipelines-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n z-index: 10;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.toolbar-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.toolbar-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 22px;\n height: 22px;\n padding: 0 6px;\n border-radius: 11px;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 11px;\n font-weight: 600;\n}\n\n.toolbar-map-count[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.global-search[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 10px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n pointer-events: none;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 240px;\n height: 32px;\n padding: 0 12px 0 30px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-color-indigo-500);\n background: var(--mj-bg-surface);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 13px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-color-neutral-300);\n color: var(--mj-text-primary);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider[_ngcontent-%COMP%] {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n\n\n\n\n\n.pipelines-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0;\n}\n\n.content-loading[_ngcontent-%COMP%], \n.content-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n}\n\n.content-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { font-size: 14px; }\n.content-empty[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n\n\n\n\n\n.cards-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n box-sizing: border-box;\n min-height: 0;\n}\n\n\n\n\n\n\n.pipeline-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card[_ngcontent-%COMP%]:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-color-indigo-100);\n box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 18px;\n cursor: pointer;\n user-select: none;\n transition: background 150ms ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover { background: var(--mj-bg-page); }\n\n.card-header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n flex: 1;\n}\n\n.card-status-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon[_ngcontent-%COMP%] {\n font-size: 18px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n width: 24px;\n text-align: center;\n}\n\n.card-info[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-meta[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep[_ngcontent-%COMP%] { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n flex-shrink: 0;\n}\n\n.card-status-label[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; }\n.card-last-sync[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); }\n\n\n\n.mini-flow[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.mini-flow-line[_ngcontent-%COMP%] { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count[_ngcontent-%COMP%] {\n font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n\n\n\n\n\n.card-body[_ngcontent-%COMP%] {\n border-top: 1px solid var(--mj-border-subtle);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n \n\n\n max-height: 60vh;\n}\n\n\n\n.card-search-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.card-search-icon[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-search-input[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.card-search-input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n\n\n.map-table-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 6px 18px;\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n border-bottom: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n\n\n.map-table-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n}\n\n.map-table-empty[_ngcontent-%COMP%] {\n padding: 24px 18px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n\n\n\n\n.map-col-source[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction[_ngcontent-%COMP%] { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta[_ngcontent-%COMP%] { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n\n\n.map-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 18px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled[_ngcontent-%COMP%] { opacity: 0.55; }\n.map-row.sync-disabled[_ngcontent-%COMP%]:hover { opacity: 0.8; }\n\n\n\n\n.map-config-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n.map-edit-hint[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n color: var(--mj-color-neutral-300);\n font-size: 11px;\n transition: color 150ms ease;\n}\n\n.map-row[_ngcontent-%COMP%]:hover .map-edit-hint[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n\n\n\n\n\n.map-col-toggle[_ngcontent-%COMP%] {\n width: 50px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sync-toggle[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}\n\n.sync-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%] {\n width: 30px;\n height: 16px;\n border-radius: 8px;\n background: var(--mj-color-neutral-300);\n position: relative;\n transition: background 200ms ease;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--mj-bg-surface);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n transition: transform 200ms ease;\n}\n\n.sync-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .sync-toggle-track[_ngcontent-%COMP%] {\n background: var(--mj-color-success-600);\n}\n\n.sync-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .sync-toggle-track[_ngcontent-%COMP%]::after {\n transform: translateX(14px);\n}\n\n\n\n\n\n\n.direction-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 20px;\n padding: 0 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n flex-shrink: 0;\n}\n\n.direction-badge.pull[_ngcontent-%COMP%] { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n\n\n\n\n\n.ve-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n background: var(--mj-bg-surface);\n animation: _ngcontent-%COMP%_slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from { opacity: 0; transform: translateX(30px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n\n\n\n.ve-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 16px;\n}\n\n.ve-header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.ve-back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 14px;\n flex-shrink: 0;\n transition: all 150ms ease;\n}\n\n.ve-back-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n min-width: 0;\n}\n\n.ve-source-label[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-direction-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label[_ngcontent-%COMP%] {\n color: var(--mj-color-success-600);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-header-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.ve-stat[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 700;\n}\n\n.ve-stat-sep[_ngcontent-%COMP%] {\n width: 1px;\n height: 14px;\n background: var(--mj-border-default);\n}\n\n.ve-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.ve-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 14px;\n border-radius: 7px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border: none;\n white-space: nowrap;\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-color-error-600);\n border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-color-success-600);\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 4px;\n animation: _ngcontent-%COMP%_fadeIn 300ms ease;\n}\n\n\n\n.ve-sync-toggle[_ngcontent-%COMP%] { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n\n\n.ve-action-sep[_ngcontent-%COMP%] {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n flex-shrink: 0;\n}\n\n\n\n.ve-btn-ghost.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n border-color: var(--mj-color-indigo-200);\n}\n\n\n\n\n\n\n.ve-preview-strip[_ngcontent-%COMP%] {\n display: flex;\n gap: 1px;\n background: var(--mj-border-default);\n border-bottom: 1px solid var(--mj-border-default);\n max-height: 220px;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.ve-preview-panel[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--mj-bg-page);\n overflow: hidden;\n}\n\n.ve-preview-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.ve-preview-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header[_ngcontent-%COMP%] span[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n}\n\n.ve-preview-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading[_ngcontent-%COMP%], \n.ve-preview-empty[_ngcontent-%COMP%] {\n padding: 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.ve-preview-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n font-size: 10px;\n padding: 5px 10px;\n text-align: left;\n white-space: nowrap;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 4px 10px;\n color: var(--mj-text-primary);\n border-bottom: 1px solid var(--mj-border-subtle);\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover td[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-50);\n}\n\n\n\n\n\n\n.ve-connect-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 20px;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-700);\n font-size: 13px;\n border-bottom: 1px solid var(--mj-color-indigo-100);\n flex-shrink: 0;\n}\n\n.ve-connect-banner[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] { font-weight: 700; }\n\n.ve-connect-cancel[_ngcontent-%COMP%] {\n margin-left: auto;\n padding: 3px 10px;\n border: 1px solid var(--mj-color-indigo-100);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-color-indigo-700);\n font-size: 12px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-connect-cancel[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-100); }\n\n\n\n\n\n\n.ve-body[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n\n.ve-loading[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n\n\n.ve-sections-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n\n\n.ve-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section[_ngcontent-%COMP%]:not(.collapsed) {\n flex: 1;\n min-height: 0;\n}\n\n.ve-section.collapsed[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.ve-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n cursor: pointer;\n user-select: none;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n transition: background 150ms ease;\n}\n\n.ve-section-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n flex-shrink: 0;\n transition: transform 200ms ease;\n}\n\n.ve-section-title[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--mj-text-muted);\n}\n\n.ve-section-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n padding: 1px 8px;\n border-radius: 4px;\n margin-left: auto;\n}\n\n.ve-section-body[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n\n\n.ve-canvas-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n\n\n\n\n\n.ve-col-headers[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--mj-text-muted);\n}\n\n.ve-col-header.source[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest[_ngcontent-%COMP%] i[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.ve-col-header-spacer[_ngcontent-%COMP%] { \n }\n\n.ve-col-count[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n padding: 1px 6px;\n border-radius: 4px;\n}\n\n\n\n\n\n\n.ve-col-searches[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n padding: 6px 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 12px;\n}\n\n.ve-col-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.ve-col-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer[_ngcontent-%COMP%] { \n }\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.ve-canvas-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n position: relative;\n}\n\n\n\n\n\n\n.ve-field-col[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.ve-field-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 14px;\n font-size: 13px;\n cursor: pointer;\n transition: background 150ms ease, opacity 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n box-sizing: border-box;\n}\n\n.ve-field-item.mapped[_ngcontent-%COMP%] { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped[_ngcontent-%COMP%] {\n opacity: 0.5;\n background: var(--mj-bg-page);\n}\n\n.ve-field-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-indigo-50);\n opacity: 1;\n}\n\n.ve-field-item.connecting[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-100);\n opacity: 1;\n box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-success-100);\n box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n.ve-field-type[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 3px;\n flex-shrink: 0;\n}\n\n.ve-fbadge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 3px;\n border-radius: 4px;\n font-size: 9px;\n font-weight: 700;\n}\n\n.ve-fbadge.pk[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty[_ngcontent-%COMP%] {\n padding: 32px 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n\n\n\n\n\n.ve-svg[_ngcontent-%COMP%] {\n display: block;\n}\n\n.ve-conn-line[_ngcontent-%COMP%] {\n fill: none;\n stroke-width: 2;\n cursor: pointer;\n transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n\n\n.ve-conn-line.conn-direct[_ngcontent-%COMP%] { stroke: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: var(--ve-color-custom, #a855f7); stroke-dasharray: 2 3; }\n\n.ve-conn-line[_ngcontent-%COMP%]:hover { stroke-width: 3.5; }\n.ve-conn-line.selected[_ngcontent-%COMP%] { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n\n\n.ve-badge-fo[_ngcontent-%COMP%] { overflow: visible; }\n\n.ve-conn-badge[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct[_ngcontent-%COMP%] { background: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #a855f7); }\n\n.ve-conn-badge[_ngcontent-%COMP%]:hover { transform: scale(1.2); }\n.ve-conn-badge.selected[_ngcontent-%COMP%] { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n\n\n\n\n\n.ve-transform-panel[_ngcontent-%COMP%] {\n width: 320px;\n flex-shrink: 0;\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n background: var(--mj-bg-page);\n animation: _ngcontent-%COMP%_slideInRight 200ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n from { opacity: 0; transform: translateX(20px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.ve-tp-title[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.ve-tp-close[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 26px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.ve-tp-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n\n\n.ve-tp-mapping-info[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.ve-tp-field[_ngcontent-%COMP%] {\n padding: 4px 10px;\n border-radius: 6px;\n font-weight: 600;\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 110px;\n}\n\n.ve-tp-field.source[_ngcontent-%COMP%] { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n\n\n.ve-tp-toggles[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.ve-tp-toggle-box[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-color-neutral-300);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: var(--mj-bg-surface);\n transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.ve-tp-section[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 10px;\n font-weight: 700;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 8px;\n}\n\n.ve-tp-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n padding: 6px 8px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ve-tp-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n\n\n.ve-tp-add-step[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-tp-add-step[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step[_ngcontent-%COMP%] {\n margin-top: 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n overflow: hidden;\n}\n\n.ve-tp-step-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 5px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n transition: all 150ms ease;\n flex-shrink: 0;\n}\n\n.ve-tp-remove-step[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config[_ngcontent-%COMP%] {\n padding: 8px 10px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n width: 80px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n border-top: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 6px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-no-steps[_ngcontent-%COMP%] {\n padding: 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n font-style: italic;\n}\n\n\n\n.ve-tp-footer[_ngcontent-%COMP%] {\n padding: 14px 16px;\n margin-top: auto;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-color-neutral-300);\n border-radius: 3px;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.ve-info-body[_ngcontent-%COMP%] {\n padding: 16px;\n overflow-y: auto;\n}\n\n.ve-info-loading[_ngcontent-%COMP%] {\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n padding: 20px;\n}\n\n.ve-info-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n margin-right: 6px;\n}\n\n.ve-info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.ve-info-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 14px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n}\n\n.ve-info-card-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-100);\n color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.ve-info-card-value[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ve-info-card-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.ve-info-details[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px;\n font-size: 12px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.ve-info-detail-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.ve-info-detail-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}"] });
2043
2043
  };
2044
2044
  PipelinesComponent = __decorate([
2045
2045
  RegisterClass(BaseResourceComponent, 'IntegrationPipelines')
@@ -2047,7 +2047,7 @@ PipelinesComponent = __decorate([
2047
2047
  export { PipelinesComponent };
2048
2048
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PipelinesComponent, [{
2049
2049
  type: Component,
2050
- args: [{ standalone: false, selector: 'app-integration-pipelines', template: "<div class=\"pipelines-container\">\n\n <!-- ===================================================================== -->\n <!-- MAP LIST VIEW (hidden when editor is open) -->\n <!-- ===================================================================== -->\n @if (!VisualEditorOpen) {\n\n <!-- Toolbar -->\n <div class=\"pipelines-toolbar\">\n <div class=\"toolbar-left\">\n <h2 class=\"toolbar-title\">\n <i class=\"fa-solid fa-diagram-project\"></i>\n Pipelines\n </h2>\n <span class=\"toolbar-count-badge\">{{ IntegrationCount }}</span>\n <span class=\"toolbar-map-count\">{{ TotalMapCount }} entity maps</span>\n </div>\n <div class=\"toolbar-right\">\n <div class=\"global-search\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input type=\"text\"\n class=\"search-input\"\n placeholder=\"Search integrations or entities...\"\n [value]=\"GlobalSearch\"\n (input)=\"OnGlobalSearchChange($event)\" />\n </div>\n <button class=\"toolbar-btn\" (click)=\"ExpandAll()\" title=\"Expand All\">\n <i class=\"fa-solid fa-angles-down\"></i>\n </button>\n <button class=\"toolbar-btn\" (click)=\"CollapseAll()\" title=\"Collapse All\">\n <i class=\"fa-solid fa-angles-up\"></i>\n </button>\n <div class=\"toolbar-divider\"></div>\n <button class=\"toolbar-btn\" (click)=\"LoadData()\" title=\"Refresh\">\n <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"IsLoading\"></i>\n </button>\n </div>\n </div>\n\n <!-- Main content area -->\n <div class=\"pipelines-content\">\n @if (IsLoading && PipelineCards.length === 0) {\n <div class=\"content-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading pipelines...</span>\n </div>\n } @else if (PipelineCards.length === 0) {\n <div class=\"content-empty\">\n <i class=\"fa-solid fa-diagram-project empty-icon\"></i>\n <h3>No Integration Pipelines</h3>\n <p>Configure integrations to see data flow pipelines here.</p>\n </div>\n } @else {\n <div class=\"cards-list\">\n @for (card of FilteredCards; track card.IntegrationID) {\n <!-- Pipeline card -->\n <div class=\"pipeline-card\" [class.expanded]=\"card.IsExpanded\">\n\n <!-- Card header (always visible) -->\n <div class=\"card-header\" (click)=\"ToggleCard(card)\">\n <div class=\"card-header-left\">\n <div class=\"card-status-dot\" [style.backgroundColor]=\"card.StatusColor\"></div>\n <i [class]=\"card.Icon + ' card-icon'\"></i>\n <div class=\"card-info\">\n <span class=\"card-name\">{{ card.IntegrationName }}</span>\n <span class=\"card-meta\">\n {{ card.EntityMapCount }} maps\n <span class=\"meta-sep\">&middot;</span>\n {{ card.ActiveMapCount }} active\n <span class=\"meta-sep\">&middot;</span>\n {{ card.UniqueEntityCount }} entities\n </span>\n </div>\n </div>\n <div class=\"card-header-right\">\n <span class=\"card-status-label\" [style.color]=\"card.StatusColor\">\n {{ card.StatusLabel }}\n </span>\n @if (card.LastSync) {\n <span class=\"card-last-sync\">{{ card.LastSync }}</span>\n }\n <!-- Mini flow indicator -->\n <div class=\"mini-flow\">\n <span class=\"mini-flow-dot source\"></span>\n <span class=\"mini-flow-line\"></span>\n <span class=\"mini-flow-count\">{{ card.EntityMapCount }}</span>\n <span class=\"mini-flow-line\"></span>\n <span class=\"mini-flow-dot dest\"></span>\n </div>\n <i class=\"fa-solid card-chevron\"\n [class.fa-chevron-down]=\"!card.IsExpanded\"\n [class.fa-chevron-up]=\"card.IsExpanded\"></i>\n </div>\n </div>\n\n <!-- Expanded entity map table -->\n @if (card.IsExpanded) {\n <div class=\"card-body\">\n <!-- Search within this integration -->\n <div class=\"card-search-bar\">\n <i class=\"fa-solid fa-filter card-search-icon\"></i>\n <input type=\"text\"\n class=\"card-search-input\"\n placeholder=\"Filter entity maps...\"\n [value]=\"card.SearchTerm\"\n (input)=\"OnCardSearch(card, $event)\" />\n <span class=\"card-search-count\">\n {{ card.FilteredMaps.length }} of {{ card.EntityMapCount }}\n </span>\n </div>\n\n <!-- Table header -->\n <div class=\"map-table-head\">\n <span class=\"map-col-toggle\">Sync</span>\n <span class=\"map-col-source\">External Object</span>\n <span class=\"map-col-direction\"></span>\n <span class=\"map-col-dest\">MJ Entity</span>\n <span class=\"map-col-meta\">Config</span>\n </div>\n\n <!-- Table body -->\n <div class=\"map-table-body\">\n @for (em of card.FilteredMaps; track em.ID) {\n <div class=\"map-row\"\n [class.sync-disabled]=\"!em.SyncEnabled\"\n (click)=\"OnMapRowClick(card, em)\">\n <span class=\"map-col-toggle\" (click)=\"$event.stopPropagation()\">\n <label class=\"sync-toggle\" [title]=\"em.SyncEnabled ? 'Sync enabled \u2014 click to disable' : 'Sync disabled \u2014 click to enable'\">\n <input type=\"checkbox\"\n [checked]=\"em.SyncEnabled\"\n (change)=\"OnToggleSyncEnabled(card, em, $event)\" />\n <span class=\"sync-toggle-track\"></span>\n </label>\n </span>\n <span class=\"map-col-source\" [title]=\"em.ExternalObjectName\">\n {{ em.ExternalObjectLabel ?? em.ExternalObjectName }}\n </span>\n <span class=\"map-col-direction\">\n <span [class]=\"DirectionBadgeClass(em.SyncDirection)\">\n {{ DirectionText(em.SyncDirection) }}\n </span>\n </span>\n <span class=\"map-col-dest\" [title]=\"em.Entity\">\n {{ em.Entity }}\n </span>\n <span class=\"map-col-meta\">\n @if (em.MatchStrategy) {\n <span class=\"map-config-badge\" [title]=\"'Match: ' + em.MatchStrategy\">\n <i class=\"fa-solid fa-link\"></i>\n </span>\n }\n <span class=\"map-config-badge\" [title]=\"'Conflict: ' + em.ConflictResolution\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </span>\n <span class=\"map-edit-hint\">\n <i class=\"fa-solid fa-chevron-right\"></i>\n </span>\n </span>\n </div>\n } @empty {\n <div class=\"map-table-empty\">\n No entity maps match your filter.\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n } @else {\n\n <!-- ===================================================================== -->\n <!-- VISUAL FIELD MAPPING EDITOR (inline, replaces map list) -->\n <!-- ===================================================================== -->\n\n <div class=\"ve-container\">\n\n <!-- Header -->\n <div class=\"ve-header\">\n <div class=\"ve-header-left\">\n <button class=\"ve-back-btn\" (click)=\"CloseVisualEditor()\" title=\"Back to Pipelines\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"ve-header-title\">\n <span class=\"ve-source-label\">{{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.ExternalObjectName }}</span>\n <span class=\"ve-direction-arrow\">\n <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n </span>\n <span class=\"ve-dest-label\">{{ EditorEntityMap?.Entity }}</span>\n </div>\n <!-- SyncEnabled toggle in editor header -->\n @if (EditorEntityMap) {\n <label class=\"sync-toggle ve-sync-toggle\"\n [title]=\"EditorEntityMap.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n <input type=\"checkbox\"\n [checked]=\"EditorEntityMap.SyncEnabled\"\n (change)=\"OnToggleEditorSyncEnabled($event)\" />\n <span class=\"sync-toggle-track\"></span>\n </label>\n <span class=\"ve-sync-label\">{{ EditorEntityMap.SyncEnabled ? 'Sync On' : 'Sync Off' }}</span>\n }\n </div>\n <div class=\"ve-header-stats\">\n <span class=\"ve-stat\">\n <strong>{{ EditorMappedCount }}</strong> mapped\n </span>\n <span class=\"ve-stat-sep\"></span>\n <span class=\"ve-stat\">\n <strong>{{ EditorKeyFieldCount }}</strong> key\n </span>\n <span class=\"ve-stat-sep\"></span>\n <span class=\"ve-stat\">\n <strong>{{ EditorRequiredCount }}</strong> required\n </span>\n </div>\n <div class=\"ve-header-actions\">\n <!-- Data preview buttons -->\n <button class=\"ve-btn ve-btn-ghost\"\n (click)=\"ToggleSourcePreview()\"\n [class.active]=\"ShowSourcePreview\"\n title=\"Preview source data\">\n <i class=\"fa-solid fa-cloud\"></i> Source Data\n </button>\n <button class=\"ve-btn ve-btn-ghost\"\n (click)=\"ToggleDestPreview()\"\n [class.active]=\"ShowDestPreview\"\n title=\"Preview MJ data\">\n <i class=\"fa-solid fa-database\"></i> MJ Data\n </button>\n <div class=\"ve-action-sep\"></div>\n <button class=\"ve-btn ve-btn-ghost\" (click)=\"AutoMapEditorFields()\" title=\"Auto-map fields by name\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n </button>\n <button class=\"ve-btn ve-btn-primary\"\n [disabled]=\"!HasEditorChanges || EditorSaving\"\n (click)=\"SaveVisualEditor()\">\n @if (EditorSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n } @else {\n <i class=\"fa-solid fa-check\"></i> Save\n }\n </button>\n @if (EditorSaveSuccess && !HasEditorChanges) {\n <span class=\"ve-save-success\">\n <i class=\"fa-solid fa-circle-check\"></i> Saved\n </span>\n }\n </div>\n </div>\n\n <!-- Data preview panels (collapsible) -->\n @if (ShowSourcePreview || ShowDestPreview) {\n <div class=\"ve-preview-strip\">\n @if (ShowSourcePreview) {\n <div class=\"ve-preview-panel\">\n <div class=\"ve-preview-header\">\n <i class=\"fa-solid fa-cloud\"></i>\n <span>Source Preview: {{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.ExternalObjectName }}</span>\n <button class=\"ve-preview-close\" (click)=\"ShowSourcePreview = false\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n @if (PreviewSourceLoading) {\n <div class=\"ve-preview-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n </div>\n } @else if (PreviewSourceRows.length === 0) {\n <div class=\"ve-preview-empty\">No source data available</div>\n } @else {\n <div class=\"ve-preview-table-wrap\">\n <table class=\"ve-preview-table\">\n <thead>\n <tr>\n @for (col of PreviewSourceColumns; track col) {\n <th>{{ col }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of PreviewSourceRows; track $index) {\n <tr>\n @for (col of PreviewSourceColumns; track col) {\n <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n }\n @if (ShowDestPreview) {\n <div class=\"ve-preview-panel\">\n <div class=\"ve-preview-header\">\n <i class=\"fa-solid fa-database\"></i>\n <span>Dest Preview: {{ EditorEntityMap?.Entity }}</span>\n <button class=\"ve-preview-close\" (click)=\"ShowDestPreview = false\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n @if (PreviewDestLoading) {\n <div class=\"ve-preview-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n </div>\n } @else if (PreviewDestRows.length === 0) {\n <div class=\"ve-preview-empty\">No destination data available</div>\n } @else {\n <div class=\"ve-preview-table-wrap\">\n <table class=\"ve-preview-table\">\n <thead>\n <tr>\n @for (col of PreviewDestColumns; track col) {\n <th>{{ col }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of PreviewDestRows; track $index) {\n <tr>\n @for (col of PreviewDestColumns; track col) {\n <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Connect mode banner -->\n @if (ConnectingFromSource) {\n <div class=\"ve-connect-banner\">\n <i class=\"fa-solid fa-link\"></i>\n Click a destination field to map from\n <strong>{{ ConnectingFromSource }}</strong>\n <button class=\"ve-connect-cancel\" (click)=\"CancelConnect()\">Cancel</button>\n </div>\n }\n\n <!-- Main content: sections + transform panel -->\n <div class=\"ve-body\" [class.has-transform-panel]=\"SelectedConnectionIdx !== null\">\n\n <!-- Loading state -->\n @if (EditorLoading) {\n <div class=\"ve-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading field mappings...</span>\n </div>\n } @else {\n\n <!-- Left content area (sections stacked vertically) -->\n <div class=\"ve-sections-wrapper\">\n\n <!-- ============================================================= -->\n <!-- FIELD MAPPINGS SECTION (collapsible) -->\n <!-- ============================================================= -->\n <div class=\"ve-section\" [class.collapsed]=\"!FieldMapsExpanded\">\n <div class=\"ve-section-header\" (click)=\"ToggleFieldMaps()\">\n <i class=\"fa-solid\"\n [class.fa-chevron-down]=\"FieldMapsExpanded\"\n [class.fa-chevron-right]=\"!FieldMapsExpanded\"></i>\n <span class=\"ve-section-title\">Field Mappings</span>\n <span class=\"ve-section-badge\">{{ EditorMappedCount }} mapped</span>\n </div>\n\n @if (FieldMapsExpanded) {\n <div class=\"ve-section-body\">\n <!-- Canvas area (scrollable) -->\n <div class=\"ve-canvas-wrapper\">\n\n <!-- Column headers -->\n <div class=\"ve-col-headers\">\n <div class=\"ve-col-header source\">\n <i class=\"fa-solid fa-cloud\"></i>\n Source Fields\n <span class=\"ve-col-count\">{{ EditorSourceFields.length }}</span>\n </div>\n <div class=\"ve-col-header-spacer\"></div>\n <div class=\"ve-col-header dest\">\n <i class=\"fa-solid fa-database\"></i>\n MJ Entity Fields\n <span class=\"ve-col-count\">{{ EditorDestFields.length }}</span>\n </div>\n </div>\n\n <!-- Search bars -->\n <div class=\"ve-col-searches\">\n <div class=\"ve-col-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input type=\"text\"\n placeholder=\"Filter source fields...\"\n [value]=\"EditorSearchSource\"\n (input)=\"EditorSearchSource = $any($event.target).value\" />\n </div>\n <div class=\"ve-col-search-spacer\"></div>\n <div class=\"ve-col-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input type=\"text\"\n placeholder=\"Filter destination fields...\"\n [value]=\"EditorSearchDest\"\n (input)=\"EditorSearchDest = $any($event.target).value\" />\n </div>\n </div>\n\n <!-- Canvas grid (source + SVG + dest) -->\n <div class=\"ve-canvas-scroll\" (click)=\"DeselectConnection()\">\n <div class=\"ve-canvas-grid\" [style.min-height.px]=\"EditorCanvasHeight\">\n\n <!-- Source column -->\n <div class=\"ve-field-col source\">\n @for (sf of FilteredEditorSourceFields; track sf.Name) {\n <div class=\"ve-field-item\"\n [class.mapped]=\"IsSourceFieldMapped(sf.Name)\"\n [class.unmapped]=\"!IsSourceFieldMapped(sf.Name)\"\n [class.connecting]=\"ConnectingFromSource === sf.Name\"\n [style.height.px]=\"FIELD_HEIGHT\"\n (click)=\"OnEditorSourceClick(sf.Name); $event.stopPropagation()\">\n <span class=\"ve-field-name\" [title]=\"sf.Name\">{{ sf.Label || sf.Name }}</span>\n <span class=\"ve-field-type\">{{ sf.Type }}</span>\n <span class=\"ve-field-badges\">\n @if (sf.IsPrimaryKey) {\n <span class=\"ve-fbadge pk\" title=\"Primary Key\">PK</span>\n }\n @if (sf.IsRequired) {\n <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n }\n </span>\n </div>\n }\n @if (FilteredEditorSourceFields.length === 0) {\n <div class=\"ve-field-empty\">No source fields found</div>\n }\n </div>\n\n <!-- SVG connection lines -->\n <svg class=\"ve-svg\"\n [attr.width]=\"SVG_WIDTH\"\n [attr.height]=\"EditorCanvasHeight\"\n [attr.viewBox]=\"'0 0 ' + SVG_WIDTH + ' ' + EditorCanvasHeight\"\n (click)=\"$event.stopPropagation()\">\n @for (conn of VisibleConnections; track conn.SourceFieldName + '-' + conn.DestFieldName; let i = $index) {\n <!-- Connection line -->\n <path [attr.d]=\"GetConnectionPath(conn)\"\n class=\"ve-conn-line\"\n [class]=\"'ve-conn-line ' + GetConnectionLineClass(conn)\"\n [class.selected]=\"SelectedConnectionIdx === i\"\n (click)=\"SelectConnection(i, $event)\" />\n <!-- Transform badge at midpoint -->\n <foreignObject\n [attr.x]=\"SVG_WIDTH / 2 - 14\"\n [attr.y]=\"GetConnectionMidY(conn) - 14\"\n width=\"28\" height=\"28\"\n class=\"ve-badge-fo\">\n <div xmlns=\"http://www.w3.org/1999/xhtml\"\n class=\"ve-conn-badge\"\n [class]=\"'ve-conn-badge ' + GetConnectionBadgeClass(conn)\"\n [class.selected]=\"SelectedConnectionIdx === i\"\n (click)=\"SelectConnection(i, $event)\">\n <i [class]=\"GetConnectionDirectionIcon(conn)\"></i>\n </div>\n </foreignObject>\n }\n </svg>\n\n <!-- Dest column -->\n <div class=\"ve-field-col dest\">\n @for (df of FilteredEditorDestFields; track df.Name) {\n <div class=\"ve-field-item\"\n [class.mapped]=\"IsDestFieldMapped(df.Name)\"\n [class.unmapped]=\"!IsDestFieldMapped(df.Name)\"\n [class.connect-target]=\"ConnectingFromSource !== null\"\n [style.height.px]=\"FIELD_HEIGHT\"\n (click)=\"OnEditorDestClick(df.Name); $event.stopPropagation()\">\n <span class=\"ve-field-name\" [title]=\"df.Name\">{{ df.Name }}</span>\n <span class=\"ve-field-type\">{{ df.Type }}</span>\n <span class=\"ve-field-badges\">\n @if (df.IsRequired) {\n <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n }\n </span>\n </div>\n }\n @if (FilteredEditorDestFields.length === 0) {\n <div class=\"ve-field-empty\">No destination fields found</div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- ============================================================= -->\n <!-- INFO PANEL SECTION (collapsible) -->\n <!-- ============================================================= -->\n <div class=\"ve-section\" [class.collapsed]=\"!InfoPanelExpanded\">\n <div class=\"ve-section-header\" (click)=\"ToggleInfoPanel()\">\n <i class=\"fa-solid\"\n [class.fa-chevron-down]=\"InfoPanelExpanded\"\n [class.fa-chevron-right]=\"!InfoPanelExpanded\"></i>\n <span class=\"ve-section-title\">Sync Info</span>\n </div>\n\n @if (InfoPanelExpanded) {\n <div class=\"ve-section-body ve-info-body\">\n @if (InfoPanelLoading) {\n <div class=\"ve-info-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading stats...\n </div>\n } @else {\n <div class=\"ve-info-grid\">\n <!-- Destination record count -->\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon\">\n <i class=\"fa-solid fa-database\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ InfoDestRecordCount ?? '-' }}</span>\n <span class=\"ve-info-card-label\">MJ Records</span>\n </div>\n </div>\n <!-- Source fields count -->\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon source\">\n <i class=\"fa-solid fa-cloud\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ EditorSourceFields.length }}</span>\n <span class=\"ve-info-card-label\">Source Fields</span>\n </div>\n </div>\n <!-- Last sync -->\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon sync\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ FormatSyncDate(InfoLastSync?.StartedAt ?? null) }}</span>\n <span class=\"ve-info-card-label\">Last Sync</span>\n </div>\n </div>\n <!-- Sync status -->\n @if (InfoLastSync) {\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon\" [ngClass]=\"SyncStatusClass(InfoLastSync.Status)\">\n <i class=\"fa-solid\"\n [class.fa-circle-check]=\"InfoLastSync.Status === 'Success'\"\n [class.fa-circle-xmark]=\"InfoLastSync.Status === 'Failed'\"\n [class.fa-spinner]=\"InfoLastSync.Status === 'In Progress'\"\n [class.fa-clock]=\"InfoLastSync.Status === 'Pending'\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ InfoLastSync.Status }}</span>\n <span class=\"ve-info-card-label\">{{ InfoLastSync.TotalRecords }} records processed</span>\n </div>\n </div>\n }\n </div>\n\n <!-- Configuration details -->\n <div class=\"ve-info-details\">\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Sync Direction</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.SyncDirection }}</span>\n </div>\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Conflict Resolution</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.ConflictResolution }}</span>\n </div>\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Delete Behavior</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.DeleteBehavior }}</span>\n </div>\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Priority</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.Priority }}</span>\n </div>\n @if (EditorEntityMap?.MatchStrategy) {\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Match Strategy</span>\n <span class=\"ve-info-detail-value\">Configured</span>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Transform editor panel (right side, appears when connection selected) -->\n @if (SelectedConnection; as conn) {\n <div class=\"ve-transform-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"ve-tp-header\">\n <span class=\"ve-tp-title\">Mapping Details</span>\n <button class=\"ve-tp-close\" (click)=\"DeselectConnection()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <!-- Source \u2192 Dest -->\n <div class=\"ve-tp-mapping-info\">\n <div class=\"ve-tp-field-pair\">\n <span class=\"ve-tp-field source\">{{ conn.SourceFieldName }}</span>\n <i class=\"fa-solid ve-tp-arrow\"\n [class.fa-arrow-right]=\"conn.Direction === 'SourceToDest'\"\n [class.fa-arrow-left]=\"conn.Direction === 'DestToSource'\"\n [class.fa-right-left]=\"conn.Direction === 'Both'\"></i>\n <span class=\"ve-tp-field dest\">{{ conn.DestFieldName }}</span>\n </div>\n </div>\n\n <!-- Toggles -->\n <div class=\"ve-tp-toggles\">\n <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionKey()\">\n <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsKeyField\">\n @if (conn.IsKeyField) { <i class=\"fa-solid fa-check\"></i> }\n </span>\n <span>Key Field</span>\n </label>\n <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionRequired()\">\n <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsRequired\">\n @if (conn.IsRequired) { <i class=\"fa-solid fa-check\"></i> }\n </span>\n <span>Required</span>\n </label>\n </div>\n\n <!-- Direction -->\n <div class=\"ve-tp-section\">\n <label class=\"ve-tp-section-label\">Direction</label>\n <div class=\"ve-tp-direction-btns\">\n <button [class.active]=\"conn.Direction === 'SourceToDest'\"\n (click)=\"OnConnectionDirectionChange('SourceToDest')\">\n Source &rarr; Dest\n </button>\n <button [class.active]=\"conn.Direction === 'DestToSource'\"\n (click)=\"OnConnectionDirectionChange('DestToSource')\">\n Dest &rarr; Source\n </button>\n <button [class.active]=\"conn.Direction === 'Both'\"\n (click)=\"OnConnectionDirectionChange('Both')\">\n Both\n </button>\n </div>\n </div>\n\n <!-- Transform pipeline -->\n <div class=\"ve-tp-section\">\n <div class=\"ve-tp-section-header\">\n <label class=\"ve-tp-section-label\">Transform Pipeline</label>\n <button class=\"ve-tp-add-step\" (click)=\"AddTransformStep()\">\n <i class=\"fa-solid fa-plus\"></i> Add Step\n </button>\n </div>\n\n @for (step of conn.TransformSteps; track $index; let si = $index) {\n <div class=\"ve-tp-step\">\n <div class=\"ve-tp-step-header\">\n <span class=\"ve-tp-step-num\">{{ si + 1 }}</span>\n <select class=\"ve-tp-type-select\"\n [value]=\"step.Type\"\n (change)=\"OnConnectionTransformChange(si, $any($event.target).value)\">\n @for (tt of TRANSFORM_TYPES; track tt.Value) {\n <option [value]=\"tt.Value\" [selected]=\"tt.Value === step.Type\">{{ tt.Label }}</option>\n }\n </select>\n <button class=\"ve-tp-remove-step\" (click)=\"RemoveTransformStep(si)\" title=\"Remove step\">\n <i class=\"fa-solid fa-trash-can\"></i>\n </button>\n </div>\n\n <!-- Config fields based on transform type -->\n @if (step.Type !== 'direct') {\n <div class=\"ve-tp-step-config\">\n @for (key of GetConfigKeys(step); track key) {\n <div class=\"ve-tp-config-row\">\n <label>{{ key }}</label>\n <input type=\"text\"\n [value]=\"GetConfigValue(step, key)\"\n (input)=\"OnTransformConfigChange(conn, si, key, $any($event.target).value)\"\n placeholder=\"{{ key }}\" />\n </div>\n }\n </div>\n }\n\n <!-- On error -->\n <div class=\"ve-tp-step-onerror\">\n <label>On Error:</label>\n <select [value]=\"step.OnError\"\n (change)=\"step.OnError = $any($event.target).value; conn.IsDirty = true\">\n <option value=\"Fail\">Fail</option>\n <option value=\"Skip\">Skip</option>\n <option value=\"Null\">Null</option>\n </select>\n </div>\n </div>\n }\n\n @if (conn.TransformSteps.length === 0) {\n <div class=\"ve-tp-no-steps\">\n No transform steps. Data passes through as-is.\n </div>\n }\n </div>\n\n <!-- Delete mapping button -->\n <div class=\"ve-tp-footer\">\n <button class=\"ve-btn ve-btn-danger\" (click)=\"RemoveSelectedConnection()\">\n <i class=\"fa-solid fa-trash-can\"></i> Remove Mapping\n </button>\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: ["/* =========================================================================\n Integration Pipelines - Card Layout + Visual Editor\n ========================================================================= */\n\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* ---------------------------------------------------------------------------\n Container\n --------------------------------------------------------------------------- */\n\n.pipelines-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-page);\n position: relative;\n overflow: hidden;\n}\n\n/* ---------------------------------------------------------------------------\n Toolbar\n --------------------------------------------------------------------------- */\n\n.pipelines-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n z-index: 10;\n}\n\n.toolbar-left {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.toolbar-title {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.toolbar-title i { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 22px;\n height: 22px;\n padding: 0 6px;\n border-radius: 11px;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 11px;\n font-weight: 600;\n}\n\n.toolbar-map-count {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.toolbar-right {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.global-search {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon {\n position: absolute;\n left: 10px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n pointer-events: none;\n}\n\n.search-input {\n width: 240px;\n height: 32px;\n padding: 0 12px 0 30px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input:focus {\n border-color: var(--mj-color-indigo-500);\n background: var(--mj-bg-surface);\n}\n\n.search-input::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 13px;\n}\n\n.toolbar-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-color-neutral-300);\n color: var(--mj-text-primary);\n}\n\n.toolbar-btn:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n/* ---------------------------------------------------------------------------\n Content area\n --------------------------------------------------------------------------- */\n\n.pipelines-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0;\n}\n\n.content-loading,\n.content-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n}\n\n.content-loading i { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading span { font-size: 14px; }\n.content-empty .empty-icon { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty p { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n/* ---------------------------------------------------------------------------\n Cards list\n --------------------------------------------------------------------------- */\n\n.cards-list {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n box-sizing: border-box;\n min-height: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Pipeline card\n --------------------------------------------------------------------------- */\n\n.pipeline-card {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded {\n border-color: var(--mj-color-indigo-100);\n box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n/* Card header */\n.card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 18px;\n cursor: pointer;\n user-select: none;\n transition: background 150ms ease;\n}\n\n.card-header:hover { background: var(--mj-bg-page); }\n\n.card-header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n flex: 1;\n}\n\n.card-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon {\n font-size: 18px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n width: 24px;\n text-align: center;\n}\n\n.card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-meta { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right {\n display: flex;\n align-items: center;\n gap: 14px;\n flex-shrink: 0;\n}\n\n.card-status-label { font-size: 12px; font-weight: 600; }\n.card-last-sync { font-size: 11px; color: var(--mj-text-disabled); }\n\n/* Mini flow indicator */\n.mini-flow { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest { background: var(--mj-color-success-600); }\n.mini-flow-line { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count {\n font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n/* ---------------------------------------------------------------------------\n Card body (expanded entity maps)\n --------------------------------------------------------------------------- */\n\n.card-body {\n border-top: 1px solid var(--mj-border-subtle);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n /* When card is expanded, card-body takes remaining space in the cards-list scroll area.\n Limit to ~60vh so the table body scrolls internally while headers stay pinned. */\n max-height: 60vh;\n}\n\n/* Search bar within card */\n.card-search-bar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.card-search-icon { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-search-input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.card-search-input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n/* Map table header */\n.map-table-head {\n display: flex;\n align-items: center;\n padding: 6px 18px;\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n border-bottom: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n/* Map table body \u2014 scrolls within the constrained card-body */\n.map-table-body {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n}\n\n.map-table-empty {\n padding: 24px 18px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n/* Map table columns */\n/* map-col-toggle width is set in the sync toggle section above */\n.map-col-source { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n/* Map row */\n.map-row {\n display: flex;\n align-items: center;\n padding: 8px 18px;\n font-size: 13px;\n color: var(--mj-color-neutral-700);\n cursor: pointer;\n transition: background 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled { opacity: 0.55; }\n.map-row.sync-disabled:hover { opacity: 0.8; }\n\n/* map-status-dot removed \u2014 replaced by sync-toggle */\n\n.map-config-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n.map-edit-hint {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n color: var(--mj-color-neutral-300);\n font-size: 11px;\n transition: color 150ms ease;\n}\n\n.map-row:hover .map-edit-hint { color: var(--mj-color-indigo-500); }\n\n/* ---------------------------------------------------------------------------\n Sync toggle column\n --------------------------------------------------------------------------- */\n\n.map-col-toggle {\n width: 50px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sync-toggle {\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}\n\n.sync-toggle input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.sync-toggle-track {\n width: 30px;\n height: 16px;\n border-radius: 8px;\n background: var(--mj-color-neutral-300);\n position: relative;\n transition: background 200ms ease;\n}\n\n.sync-toggle-track::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--mj-bg-surface);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n transition: transform 200ms ease;\n}\n\n.sync-toggle input:checked + .sync-toggle-track {\n background: var(--mj-color-success-600);\n}\n\n.sync-toggle input:checked + .sync-toggle-track::after {\n transform: translateX(14px);\n}\n\n/* ---------------------------------------------------------------------------\n Direction Badges\n --------------------------------------------------------------------------- */\n\n.direction-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 20px;\n padding: 0 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n flex-shrink: 0;\n}\n\n.direction-badge.pull { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n/* =========================================================================\n VISUAL EDITOR (inline panel, replaces map list)\n ========================================================================= */\n\n.ve-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n background: var(--mj-bg-surface);\n animation: slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n from { opacity: 0; transform: translateX(30px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ---------------------------------------------------------------------------\n VE Header\n --------------------------------------------------------------------------- */\n\n.ve-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 16px;\n}\n\n.ve-header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.ve-back-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 14px;\n flex-shrink: 0;\n transition: all 150ms ease;\n}\n\n.ve-back-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n min-width: 0;\n}\n\n.ve-source-label {\n color: var(--mj-color-indigo-500);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-direction-arrow { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label {\n color: var(--mj-color-success-600);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-header-stats {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.ve-stat {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat strong {\n color: var(--mj-text-primary);\n font-weight: 700;\n}\n\n.ve-stat-sep {\n width: 1px;\n height: 14px;\n background: var(--mj-border-default);\n}\n\n.ve-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.ve-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 14px;\n border-radius: 7px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border: none;\n white-space: nowrap;\n}\n\n.ve-btn-ghost {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary {\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger {\n background: var(--mj-status-error-bg);\n color: var(--mj-color-error-600);\n border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success {\n font-size: 12px;\n color: var(--mj-color-success-600);\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 4px;\n animation: fadeIn 300ms ease;\n}\n\n/* Sync toggle in editor header */\n.ve-sync-toggle { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n/* Action separator */\n.ve-action-sep {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n flex-shrink: 0;\n}\n\n/* Active state for preview toggle buttons */\n.ve-btn-ghost.active {\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n border-color: var(--mj-color-indigo-200);\n}\n\n/* ---------------------------------------------------------------------------\n Data Preview Strip\n --------------------------------------------------------------------------- */\n\n.ve-preview-strip {\n display: flex;\n gap: 1px;\n background: var(--mj-border-default);\n border-bottom: 1px solid var(--mj-border-default);\n max-height: 220px;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.ve-preview-panel {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--mj-bg-page);\n overflow: hidden;\n}\n\n.ve-preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.ve-preview-header i { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n}\n\n.ve-preview-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading,\n.ve-preview-empty {\n padding: 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.ve-preview-loading i { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap {\n flex: 1;\n overflow: auto;\n}\n\n.ve-preview-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.ve-preview-table th {\n position: sticky;\n top: 0;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n font-size: 10px;\n padding: 5px 10px;\n text-align: left;\n white-space: nowrap;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table td {\n padding: 4px 10px;\n color: var(--mj-text-primary);\n border-bottom: 1px solid var(--mj-border-subtle);\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.ve-preview-table tbody tr:hover td {\n background: var(--mj-color-indigo-50);\n}\n\n/* ---------------------------------------------------------------------------\n Connect mode banner\n --------------------------------------------------------------------------- */\n\n.ve-connect-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 20px;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-700);\n font-size: 13px;\n border-bottom: 1px solid var(--mj-color-indigo-100);\n flex-shrink: 0;\n}\n\n.ve-connect-banner strong { font-weight: 700; }\n\n.ve-connect-cancel {\n margin-left: auto;\n padding: 3px 10px;\n border: 1px solid var(--mj-color-indigo-100);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-color-indigo-700);\n font-size: 12px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-connect-cancel:hover { background: var(--mj-color-indigo-100); }\n\n/* ---------------------------------------------------------------------------\n VE Body\n --------------------------------------------------------------------------- */\n\n.ve-body {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n\n.ve-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-loading i { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n/* Sections wrapper (replaces ve-canvas-wrapper as the main left area) */\n.ve-sections-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n/* Collapsible section */\n.ve-section {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section:not(.collapsed) {\n flex: 1;\n min-height: 0;\n}\n\n.ve-section.collapsed {\n flex-shrink: 0;\n}\n\n.ve-section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n cursor: pointer;\n user-select: none;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n transition: background 150ms ease;\n}\n\n.ve-section-header:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header i {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n flex-shrink: 0;\n transition: transform 200ms ease;\n}\n\n.ve-section-title {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--mj-text-muted);\n}\n\n.ve-section-badge {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n padding: 1px 8px;\n border-radius: 4px;\n margin-left: auto;\n}\n\n.ve-section-body {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n animation: fadeIn 200ms ease;\n}\n\n/* Canvas wrapper (takes available space, pushes transform panel right) */\n.ve-canvas-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Column headers\n --------------------------------------------------------------------------- */\n\n.ve-col-headers {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--mj-text-muted);\n}\n\n.ve-col-header.source i { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest i { color: var(--mj-color-success-600); }\n.ve-col-header-spacer { /* SVG gap */ }\n\n.ve-col-count {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n padding: 1px 6px;\n border-radius: 4px;\n}\n\n/* ---------------------------------------------------------------------------\n Column search bars\n --------------------------------------------------------------------------- */\n\n.ve-col-searches {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n padding: 6px 0;\n}\n\n.ve-col-search {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 12px;\n}\n\n.ve-col-search i {\n font-size: 11px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-col-search input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.ve-col-search input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search input::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer { /* SVG gap */ }\n\n/* ---------------------------------------------------------------------------\n Canvas scroll + grid\n --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.ve-canvas-grid {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n position: relative;\n}\n\n/* ---------------------------------------------------------------------------\n Field columns\n --------------------------------------------------------------------------- */\n\n.ve-field-col {\n display: flex;\n flex-direction: column;\n}\n\n.ve-field-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 14px;\n font-size: 13px;\n cursor: pointer;\n transition: background 150ms ease, opacity 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n box-sizing: border-box;\n}\n\n.ve-field-item.mapped { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped {\n opacity: 0.5;\n background: var(--mj-bg-page);\n}\n\n.ve-field-item:hover {\n background: var(--mj-color-indigo-50);\n opacity: 1;\n}\n\n.ve-field-item.connecting {\n background: var(--mj-color-indigo-100);\n opacity: 1;\n box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target:hover {\n background: var(--mj-color-success-100);\n box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--mj-color-neutral-700);\n font-weight: 500;\n}\n\n.ve-field-type {\n font-size: 10px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges {\n display: flex;\n gap: 3px;\n flex-shrink: 0;\n}\n\n.ve-fbadge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 3px;\n border-radius: 4px;\n font-size: 9px;\n font-weight: 700;\n}\n\n.ve-fbadge.pk { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty {\n padding: 32px 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n/* ---------------------------------------------------------------------------\n SVG connections\n --------------------------------------------------------------------------- */\n\n.ve-svg {\n display: block;\n}\n\n.ve-conn-line {\n fill: none;\n stroke-width: 2;\n cursor: pointer;\n transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n/* Transform-based line styles */\n.ve-conn-line.conn-direct { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line:hover { stroke-width: 3.5; }\n.ve-conn-line.selected { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n/* Connection badge at midpoint */\n.ve-badge-fo { overflow: visible; }\n\n.ve-conn-badge {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge:hover { transform: scale(1.2); }\n.ve-conn-badge.selected { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n/* ---------------------------------------------------------------------------\n Transform Panel (right side)\n --------------------------------------------------------------------------- */\n\n.ve-transform-panel {\n width: 320px;\n flex-shrink: 0;\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n background: var(--mj-bg-page);\n animation: slideInRight 200ms ease;\n}\n\n@keyframes slideInRight {\n from { opacity: 0; transform: translateX(20px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.ve-tp-title {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.ve-tp-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 26px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.ve-tp-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n/* Mapping info */\n.ve-tp-mapping-info {\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.ve-tp-field {\n padding: 4px 10px;\n border-radius: 6px;\n font-weight: 600;\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 110px;\n}\n\n.ve-tp-field.source { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n/* Toggles */\n.ve-tp-toggles {\n display: flex;\n gap: 16px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.ve-tp-toggle-box {\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-color-neutral-300);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: var(--mj-bg-surface);\n transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active {\n background: var(--mj-color-indigo-500);\n border-color: var(--mj-color-indigo-500);\n}\n\n/* Sections */\n.ve-tp-section {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label {\n display: block;\n font-size: 10px;\n font-weight: 700;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 8px;\n}\n\n.ve-tp-section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n/* Direction buttons */\n.ve-tp-direction-btns {\n display: flex;\n gap: 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.ve-tp-direction-btns button {\n flex: 1;\n padding: 6px 8px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns button:last-child { border-right: none; }\n.ve-tp-direction-btns button:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns button.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n/* Transform steps */\n.ve-tp-add-step {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-tp-add-step:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step {\n margin-top: 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n overflow: hidden;\n}\n\n.ve-tp-step-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.ve-tp-type-select {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-type-select:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 5px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n transition: all 150ms ease;\n flex-shrink: 0;\n}\n\n.ve-tp-remove-step:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config {\n padding: 8px 10px;\n}\n\n.ve-tp-config-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.ve-tp-config-row:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row label {\n width: 80px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n.ve-tp-config-row input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-page);\n outline: none;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n border-top: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror label {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-tp-step-onerror select {\n height: 24px;\n padding: 0 6px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n font-size: 11px;\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-no-steps {\n padding: 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n font-style: italic;\n}\n\n/* Footer */\n.ve-tp-footer {\n padding: 14px 16px;\n margin-top: auto;\n flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Scrollbar styling\n --------------------------------------------------------------------------- */\n\n.cards-list::-webkit-scrollbar,\n.map-table-body::-webkit-scrollbar,\n.ve-canvas-scroll::-webkit-scrollbar,\n.ve-transform-panel::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n.cards-list::-webkit-scrollbar-track,\n.map-table-body::-webkit-scrollbar-track,\n.ve-canvas-scroll::-webkit-scrollbar-track,\n.ve-transform-panel::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.cards-list::-webkit-scrollbar-thumb,\n.map-table-body::-webkit-scrollbar-thumb,\n.ve-canvas-scroll::-webkit-scrollbar-thumb,\n.ve-transform-panel::-webkit-scrollbar-thumb {\n background: var(--mj-color-neutral-300);\n border-radius: 3px;\n}\n\n.cards-list::-webkit-scrollbar-thumb:hover,\n.map-table-body::-webkit-scrollbar-thumb:hover,\n.ve-canvas-scroll::-webkit-scrollbar-thumb:hover,\n.ve-transform-panel::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* ---------------------------------------------------------------------------\n Info Panel\n --------------------------------------------------------------------------- */\n\n.ve-info-body {\n padding: 16px;\n overflow-y: auto;\n}\n\n.ve-info-loading {\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n padding: 20px;\n}\n\n.ve-info-loading i {\n color: var(--mj-color-indigo-500);\n margin-right: 6px;\n}\n\n.ve-info-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.ve-info-card {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 14px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n}\n\n.ve-info-card-icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error {\n background: var(--mj-color-error-100);\n color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending {\n background: var(--mj-color-warning-100);\n color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.ve-info-card-value {\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ve-info-card-label {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.ve-info-details {\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ve-info-detail-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px;\n font-size: 12px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row:last-child {\n border-bottom: none;\n}\n\n.ve-info-detail-label {\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.ve-info-detail-value {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n"] }]
2050
+ args: [{ standalone: false, selector: 'app-integration-pipelines', template: "<div class=\"pipelines-container\">\n\n <!-- ===================================================================== -->\n <!-- MAP LIST VIEW (hidden when editor is open) -->\n <!-- ===================================================================== -->\n @if (!VisualEditorOpen) {\n\n <!-- Toolbar -->\n <div class=\"pipelines-toolbar\">\n <div class=\"toolbar-left\">\n <h2 class=\"toolbar-title\">\n <i class=\"fa-solid fa-diagram-project\"></i>\n Pipelines\n </h2>\n <span class=\"toolbar-count-badge\">{{ IntegrationCount }}</span>\n <span class=\"toolbar-map-count\">{{ TotalMapCount }} entity maps</span>\n </div>\n <div class=\"toolbar-right\">\n <div class=\"global-search\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input type=\"text\"\n class=\"search-input\"\n placeholder=\"Search integrations or entities...\"\n [value]=\"GlobalSearch\"\n (input)=\"OnGlobalSearchChange($event)\" />\n </div>\n <button class=\"toolbar-btn\" (click)=\"ExpandAll()\" title=\"Expand All\">\n <i class=\"fa-solid fa-angles-down\"></i>\n </button>\n <button class=\"toolbar-btn\" (click)=\"CollapseAll()\" title=\"Collapse All\">\n <i class=\"fa-solid fa-angles-up\"></i>\n </button>\n <div class=\"toolbar-divider\"></div>\n <button class=\"toolbar-btn\" (click)=\"LoadData()\" title=\"Refresh\">\n <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"IsLoading\"></i>\n </button>\n </div>\n </div>\n\n <!-- Main content area -->\n <div class=\"pipelines-content\">\n @if (IsLoading && PipelineCards.length === 0) {\n <div class=\"content-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading pipelines...</span>\n </div>\n } @else if (PipelineCards.length === 0) {\n <div class=\"content-empty\">\n <i class=\"fa-solid fa-diagram-project empty-icon\"></i>\n <h3>No Integration Pipelines</h3>\n <p>Configure integrations to see data flow pipelines here.</p>\n </div>\n } @else {\n <div class=\"cards-list\">\n @for (card of FilteredCards; track card.IntegrationID) {\n <!-- Pipeline card -->\n <div class=\"pipeline-card\" [class.expanded]=\"card.IsExpanded\">\n\n <!-- Card header (always visible) -->\n <div class=\"card-header\" (click)=\"ToggleCard(card)\">\n <div class=\"card-header-left\">\n <div class=\"card-status-dot\" [style.backgroundColor]=\"card.StatusColor\"></div>\n <i [class]=\"card.Icon + ' card-icon'\"></i>\n <div class=\"card-info\">\n <span class=\"card-name\">{{ card.IntegrationName }}</span>\n <span class=\"card-meta\">\n {{ card.EntityMapCount }} maps\n <span class=\"meta-sep\">&middot;</span>\n {{ card.ActiveMapCount }} active\n <span class=\"meta-sep\">&middot;</span>\n {{ card.UniqueEntityCount }} entities\n </span>\n </div>\n </div>\n <div class=\"card-header-right\">\n <span class=\"card-status-label\" [style.color]=\"card.StatusColor\">\n {{ card.StatusLabel }}\n </span>\n @if (card.LastSync) {\n <span class=\"card-last-sync\">{{ card.LastSync }}</span>\n }\n <!-- Mini flow indicator -->\n <div class=\"mini-flow\">\n <span class=\"mini-flow-dot source\"></span>\n <span class=\"mini-flow-line\"></span>\n <span class=\"mini-flow-count\">{{ card.EntityMapCount }}</span>\n <span class=\"mini-flow-line\"></span>\n <span class=\"mini-flow-dot dest\"></span>\n </div>\n <i class=\"fa-solid card-chevron\"\n [class.fa-chevron-down]=\"!card.IsExpanded\"\n [class.fa-chevron-up]=\"card.IsExpanded\"></i>\n </div>\n </div>\n\n <!-- Expanded entity map table -->\n @if (card.IsExpanded) {\n <div class=\"card-body\">\n <!-- Search within this integration -->\n <div class=\"card-search-bar\">\n <i class=\"fa-solid fa-filter card-search-icon\"></i>\n <input type=\"text\"\n class=\"card-search-input\"\n placeholder=\"Filter entity maps...\"\n [value]=\"card.SearchTerm\"\n (input)=\"OnCardSearch(card, $event)\" />\n <span class=\"card-search-count\">\n {{ card.FilteredMaps.length }} of {{ card.EntityMapCount }}\n </span>\n </div>\n\n <!-- Table header -->\n <div class=\"map-table-head\">\n <span class=\"map-col-toggle\">Sync</span>\n <span class=\"map-col-source\">External Object</span>\n <span class=\"map-col-direction\"></span>\n <span class=\"map-col-dest\">MJ Entity</span>\n <span class=\"map-col-meta\">Config</span>\n </div>\n\n <!-- Table body -->\n <div class=\"map-table-body\">\n @for (em of card.FilteredMaps; track em.ID) {\n <div class=\"map-row\"\n [class.sync-disabled]=\"!em.SyncEnabled\"\n (click)=\"OnMapRowClick(card, em)\">\n <span class=\"map-col-toggle\" (click)=\"$event.stopPropagation()\">\n <label class=\"sync-toggle\" [title]=\"em.SyncEnabled ? 'Sync enabled \u2014 click to disable' : 'Sync disabled \u2014 click to enable'\">\n <input type=\"checkbox\"\n [checked]=\"em.SyncEnabled\"\n (change)=\"OnToggleSyncEnabled(card, em, $event)\" />\n <span class=\"sync-toggle-track\"></span>\n </label>\n </span>\n <span class=\"map-col-source\" [title]=\"em.ExternalObjectName\">\n {{ em.ExternalObjectLabel ?? em.ExternalObjectName }}\n </span>\n <span class=\"map-col-direction\">\n <span [class]=\"DirectionBadgeClass(em.SyncDirection)\">\n {{ DirectionText(em.SyncDirection) }}\n </span>\n </span>\n <span class=\"map-col-dest\" [title]=\"em.Entity\">\n {{ em.Entity }}\n </span>\n <span class=\"map-col-meta\">\n @if (em.MatchStrategy) {\n <span class=\"map-config-badge\" [title]=\"'Match: ' + em.MatchStrategy\">\n <i class=\"fa-solid fa-link\"></i>\n </span>\n }\n <span class=\"map-config-badge\" [title]=\"'Conflict: ' + em.ConflictResolution\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </span>\n <span class=\"map-edit-hint\">\n <i class=\"fa-solid fa-chevron-right\"></i>\n </span>\n </span>\n </div>\n } @empty {\n <div class=\"map-table-empty\">\n No entity maps match your filter.\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n } @else {\n\n <!-- ===================================================================== -->\n <!-- VISUAL FIELD MAPPING EDITOR (inline, replaces map list) -->\n <!-- ===================================================================== -->\n\n <div class=\"ve-container\">\n\n <!-- Header -->\n <div class=\"ve-header\">\n <div class=\"ve-header-left\">\n <button class=\"ve-back-btn\" (click)=\"CloseVisualEditor()\" title=\"Back to Pipelines\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"ve-header-title\">\n <span class=\"ve-source-label\">{{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.ExternalObjectName }}</span>\n <span class=\"ve-direction-arrow\">\n <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n </span>\n <span class=\"ve-dest-label\">{{ EditorEntityMap?.Entity }}</span>\n </div>\n <!-- SyncEnabled toggle in editor header -->\n @if (EditorEntityMap) {\n <label class=\"sync-toggle ve-sync-toggle\"\n [title]=\"EditorEntityMap.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n <input type=\"checkbox\"\n [checked]=\"EditorEntityMap.SyncEnabled\"\n (change)=\"OnToggleEditorSyncEnabled($event)\" />\n <span class=\"sync-toggle-track\"></span>\n </label>\n <span class=\"ve-sync-label\">{{ EditorEntityMap.SyncEnabled ? 'Sync On' : 'Sync Off' }}</span>\n }\n </div>\n <div class=\"ve-header-stats\">\n <span class=\"ve-stat\">\n <strong>{{ EditorMappedCount }}</strong> mapped\n </span>\n <span class=\"ve-stat-sep\"></span>\n <span class=\"ve-stat\">\n <strong>{{ EditorKeyFieldCount }}</strong> key\n </span>\n <span class=\"ve-stat-sep\"></span>\n <span class=\"ve-stat\">\n <strong>{{ EditorRequiredCount }}</strong> required\n </span>\n </div>\n <div class=\"ve-header-actions\">\n <!-- Data preview buttons -->\n <button class=\"ve-btn ve-btn-ghost\"\n (click)=\"ToggleSourcePreview()\"\n [class.active]=\"ShowSourcePreview\"\n title=\"Preview source data\">\n <i class=\"fa-solid fa-cloud\"></i> Source Data\n </button>\n <button class=\"ve-btn ve-btn-ghost\"\n (click)=\"ToggleDestPreview()\"\n [class.active]=\"ShowDestPreview\"\n title=\"Preview MJ data\">\n <i class=\"fa-solid fa-database\"></i> MJ Data\n </button>\n <div class=\"ve-action-sep\"></div>\n <button class=\"ve-btn ve-btn-ghost\" (click)=\"AutoMapEditorFields()\" title=\"Auto-map fields by name\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n </button>\n <button class=\"ve-btn ve-btn-primary\"\n [disabled]=\"!HasEditorChanges || EditorSaving\"\n (click)=\"SaveVisualEditor()\">\n @if (EditorSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n } @else {\n <i class=\"fa-solid fa-check\"></i> Save\n }\n </button>\n @if (EditorSaveSuccess && !HasEditorChanges) {\n <span class=\"ve-save-success\">\n <i class=\"fa-solid fa-circle-check\"></i> Saved\n </span>\n }\n </div>\n </div>\n\n <!-- Data preview panels (collapsible) -->\n @if (ShowSourcePreview || ShowDestPreview) {\n <div class=\"ve-preview-strip\">\n @if (ShowSourcePreview) {\n <div class=\"ve-preview-panel\">\n <div class=\"ve-preview-header\">\n <i class=\"fa-solid fa-cloud\"></i>\n <span>Source Preview: {{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.ExternalObjectName }}</span>\n <button class=\"ve-preview-close\" (click)=\"ShowSourcePreview = false\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n @if (PreviewSourceLoading) {\n <div class=\"ve-preview-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n </div>\n } @else if (PreviewSourceRows.length === 0) {\n <div class=\"ve-preview-empty\">No source data available</div>\n } @else {\n <div class=\"ve-preview-table-wrap\">\n <table class=\"ve-preview-table\">\n <thead>\n <tr>\n @for (col of PreviewSourceColumns; track col) {\n <th>{{ col }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of PreviewSourceRows; track $index) {\n <tr>\n @for (col of PreviewSourceColumns; track col) {\n <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n }\n @if (ShowDestPreview) {\n <div class=\"ve-preview-panel\">\n <div class=\"ve-preview-header\">\n <i class=\"fa-solid fa-database\"></i>\n <span>Dest Preview: {{ EditorEntityMap?.Entity }}</span>\n <button class=\"ve-preview-close\" (click)=\"ShowDestPreview = false\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n @if (PreviewDestLoading) {\n <div class=\"ve-preview-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n </div>\n } @else if (PreviewDestRows.length === 0) {\n <div class=\"ve-preview-empty\">No destination data available</div>\n } @else {\n <div class=\"ve-preview-table-wrap\">\n <table class=\"ve-preview-table\">\n <thead>\n <tr>\n @for (col of PreviewDestColumns; track col) {\n <th>{{ col }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of PreviewDestRows; track $index) {\n <tr>\n @for (col of PreviewDestColumns; track col) {\n <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Connect mode banner -->\n @if (ConnectingFromSource) {\n <div class=\"ve-connect-banner\">\n <i class=\"fa-solid fa-link\"></i>\n Click a destination field to map from\n <strong>{{ ConnectingFromSource }}</strong>\n <button class=\"ve-connect-cancel\" (click)=\"CancelConnect()\">Cancel</button>\n </div>\n }\n\n <!-- Main content: sections + transform panel -->\n <div class=\"ve-body\" [class.has-transform-panel]=\"SelectedConnectionIdx !== null\">\n\n <!-- Loading state -->\n @if (EditorLoading) {\n <div class=\"ve-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading field mappings...</span>\n </div>\n } @else {\n\n <!-- Left content area (sections stacked vertically) -->\n <div class=\"ve-sections-wrapper\">\n\n <!-- ============================================================= -->\n <!-- FIELD MAPPINGS SECTION (collapsible) -->\n <!-- ============================================================= -->\n <div class=\"ve-section\" [class.collapsed]=\"!FieldMapsExpanded\">\n <div class=\"ve-section-header\" (click)=\"ToggleFieldMaps()\">\n <i class=\"fa-solid\"\n [class.fa-chevron-down]=\"FieldMapsExpanded\"\n [class.fa-chevron-right]=\"!FieldMapsExpanded\"></i>\n <span class=\"ve-section-title\">Field Mappings</span>\n <span class=\"ve-section-badge\">{{ EditorMappedCount }} mapped</span>\n </div>\n\n @if (FieldMapsExpanded) {\n <div class=\"ve-section-body\">\n <!-- Canvas area (scrollable) -->\n <div class=\"ve-canvas-wrapper\">\n\n <!-- Column headers -->\n <div class=\"ve-col-headers\">\n <div class=\"ve-col-header source\">\n <i class=\"fa-solid fa-cloud\"></i>\n Source Fields\n <span class=\"ve-col-count\">{{ EditorSourceFields.length }}</span>\n </div>\n <div class=\"ve-col-header-spacer\"></div>\n <div class=\"ve-col-header dest\">\n <i class=\"fa-solid fa-database\"></i>\n MJ Entity Fields\n <span class=\"ve-col-count\">{{ EditorDestFields.length }}</span>\n </div>\n </div>\n\n <!-- Search bars -->\n <div class=\"ve-col-searches\">\n <div class=\"ve-col-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input type=\"text\"\n placeholder=\"Filter source fields...\"\n [value]=\"EditorSearchSource\"\n (input)=\"EditorSearchSource = $any($event.target).value\" />\n </div>\n <div class=\"ve-col-search-spacer\"></div>\n <div class=\"ve-col-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input type=\"text\"\n placeholder=\"Filter destination fields...\"\n [value]=\"EditorSearchDest\"\n (input)=\"EditorSearchDest = $any($event.target).value\" />\n </div>\n </div>\n\n <!-- Canvas grid (source + SVG + dest) -->\n <div class=\"ve-canvas-scroll\" (click)=\"DeselectConnection()\">\n <div class=\"ve-canvas-grid\" [style.min-height.px]=\"EditorCanvasHeight\">\n\n <!-- Source column -->\n <div class=\"ve-field-col source\">\n @for (sf of FilteredEditorSourceFields; track sf.Name) {\n <div class=\"ve-field-item\"\n [class.mapped]=\"IsSourceFieldMapped(sf.Name)\"\n [class.unmapped]=\"!IsSourceFieldMapped(sf.Name)\"\n [class.connecting]=\"ConnectingFromSource === sf.Name\"\n [style.height.px]=\"FIELD_HEIGHT\"\n (click)=\"OnEditorSourceClick(sf.Name); $event.stopPropagation()\">\n <span class=\"ve-field-name\" [title]=\"sf.Name\">{{ sf.Label || sf.Name }}</span>\n <span class=\"ve-field-type\">{{ sf.Type }}</span>\n <span class=\"ve-field-badges\">\n @if (sf.IsPrimaryKey) {\n <span class=\"ve-fbadge pk\" title=\"Primary Key\">PK</span>\n }\n @if (sf.IsRequired) {\n <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n }\n </span>\n </div>\n }\n @if (FilteredEditorSourceFields.length === 0) {\n <div class=\"ve-field-empty\">No source fields found</div>\n }\n </div>\n\n <!-- SVG connection lines -->\n <svg class=\"ve-svg\"\n [attr.width]=\"SVG_WIDTH\"\n [attr.height]=\"EditorCanvasHeight\"\n [attr.viewBox]=\"'0 0 ' + SVG_WIDTH + ' ' + EditorCanvasHeight\"\n (click)=\"$event.stopPropagation()\">\n @for (conn of VisibleConnections; track conn.SourceFieldName + '-' + conn.DestFieldName; let i = $index) {\n <!-- Connection line -->\n <path [attr.d]=\"GetConnectionPath(conn)\"\n class=\"ve-conn-line\"\n [class]=\"'ve-conn-line ' + GetConnectionLineClass(conn)\"\n [class.selected]=\"SelectedConnectionIdx === i\"\n (click)=\"SelectConnection(i, $event)\" />\n <!-- Transform badge at midpoint -->\n <foreignObject\n [attr.x]=\"SVG_WIDTH / 2 - 14\"\n [attr.y]=\"GetConnectionMidY(conn) - 14\"\n width=\"28\" height=\"28\"\n class=\"ve-badge-fo\">\n <div xmlns=\"http://www.w3.org/1999/xhtml\"\n class=\"ve-conn-badge\"\n [class]=\"'ve-conn-badge ' + GetConnectionBadgeClass(conn)\"\n [class.selected]=\"SelectedConnectionIdx === i\"\n (click)=\"SelectConnection(i, $event)\">\n <i [class]=\"GetConnectionDirectionIcon(conn)\"></i>\n </div>\n </foreignObject>\n }\n </svg>\n\n <!-- Dest column -->\n <div class=\"ve-field-col dest\">\n @for (df of FilteredEditorDestFields; track df.Name) {\n <div class=\"ve-field-item\"\n [class.mapped]=\"IsDestFieldMapped(df.Name)\"\n [class.unmapped]=\"!IsDestFieldMapped(df.Name)\"\n [class.connect-target]=\"ConnectingFromSource !== null\"\n [style.height.px]=\"FIELD_HEIGHT\"\n (click)=\"OnEditorDestClick(df.Name); $event.stopPropagation()\">\n <span class=\"ve-field-name\" [title]=\"df.Name\">{{ df.Name }}</span>\n <span class=\"ve-field-type\">{{ df.Type }}</span>\n <span class=\"ve-field-badges\">\n @if (df.IsRequired) {\n <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n }\n </span>\n </div>\n }\n @if (FilteredEditorDestFields.length === 0) {\n <div class=\"ve-field-empty\">No destination fields found</div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- ============================================================= -->\n <!-- INFO PANEL SECTION (collapsible) -->\n <!-- ============================================================= -->\n <div class=\"ve-section\" [class.collapsed]=\"!InfoPanelExpanded\">\n <div class=\"ve-section-header\" (click)=\"ToggleInfoPanel()\">\n <i class=\"fa-solid\"\n [class.fa-chevron-down]=\"InfoPanelExpanded\"\n [class.fa-chevron-right]=\"!InfoPanelExpanded\"></i>\n <span class=\"ve-section-title\">Sync Info</span>\n </div>\n\n @if (InfoPanelExpanded) {\n <div class=\"ve-section-body ve-info-body\">\n @if (InfoPanelLoading) {\n <div class=\"ve-info-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading stats...\n </div>\n } @else {\n <div class=\"ve-info-grid\">\n <!-- Destination record count -->\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon\">\n <i class=\"fa-solid fa-database\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ InfoDestRecordCount ?? '-' }}</span>\n <span class=\"ve-info-card-label\">MJ Records</span>\n </div>\n </div>\n <!-- Source fields count -->\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon source\">\n <i class=\"fa-solid fa-cloud\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ EditorSourceFields.length }}</span>\n <span class=\"ve-info-card-label\">Source Fields</span>\n </div>\n </div>\n <!-- Last sync -->\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon sync\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ FormatSyncDate(InfoLastSync?.StartedAt ?? null) }}</span>\n <span class=\"ve-info-card-label\">Last Sync</span>\n </div>\n </div>\n <!-- Sync status -->\n @if (InfoLastSync) {\n <div class=\"ve-info-card\">\n <div class=\"ve-info-card-icon\" [ngClass]=\"SyncStatusClass(InfoLastSync.Status)\">\n <i class=\"fa-solid\"\n [class.fa-circle-check]=\"InfoLastSync.Status === 'Success'\"\n [class.fa-circle-xmark]=\"InfoLastSync.Status === 'Failed'\"\n [class.fa-spinner]=\"InfoLastSync.Status === 'In Progress'\"\n [class.fa-clock]=\"InfoLastSync.Status === 'Pending'\"></i>\n </div>\n <div class=\"ve-info-card-content\">\n <span class=\"ve-info-card-value\">{{ InfoLastSync.Status }}</span>\n <span class=\"ve-info-card-label\">{{ InfoLastSync.TotalRecords }} records processed</span>\n </div>\n </div>\n }\n </div>\n\n <!-- Configuration details -->\n <div class=\"ve-info-details\">\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Sync Direction</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.SyncDirection }}</span>\n </div>\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Conflict Resolution</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.ConflictResolution }}</span>\n </div>\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Delete Behavior</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.DeleteBehavior }}</span>\n </div>\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Priority</span>\n <span class=\"ve-info-detail-value\">{{ EditorEntityMap?.Priority }}</span>\n </div>\n @if (EditorEntityMap?.MatchStrategy) {\n <div class=\"ve-info-detail-row\">\n <span class=\"ve-info-detail-label\">Match Strategy</span>\n <span class=\"ve-info-detail-value\">Configured</span>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Transform editor panel (right side, appears when connection selected) -->\n @if (SelectedConnection; as conn) {\n <div class=\"ve-transform-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"ve-tp-header\">\n <span class=\"ve-tp-title\">Mapping Details</span>\n <button class=\"ve-tp-close\" (click)=\"DeselectConnection()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <!-- Source \u2192 Dest -->\n <div class=\"ve-tp-mapping-info\">\n <div class=\"ve-tp-field-pair\">\n <span class=\"ve-tp-field source\">{{ conn.SourceFieldName }}</span>\n <i class=\"fa-solid ve-tp-arrow\"\n [class.fa-arrow-right]=\"conn.Direction === 'SourceToDest'\"\n [class.fa-arrow-left]=\"conn.Direction === 'DestToSource'\"\n [class.fa-right-left]=\"conn.Direction === 'Both'\"></i>\n <span class=\"ve-tp-field dest\">{{ conn.DestFieldName }}</span>\n </div>\n </div>\n\n <!-- Toggles -->\n <div class=\"ve-tp-toggles\">\n <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionKey()\">\n <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsKeyField\">\n @if (conn.IsKeyField) { <i class=\"fa-solid fa-check\"></i> }\n </span>\n <span>Key Field</span>\n </label>\n <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionRequired()\">\n <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsRequired\">\n @if (conn.IsRequired) { <i class=\"fa-solid fa-check\"></i> }\n </span>\n <span>Required</span>\n </label>\n </div>\n\n <!-- Direction -->\n <div class=\"ve-tp-section\">\n <label class=\"ve-tp-section-label\">Direction</label>\n <div class=\"ve-tp-direction-btns\">\n <button [class.active]=\"conn.Direction === 'SourceToDest'\"\n (click)=\"OnConnectionDirectionChange('SourceToDest')\">\n Source &rarr; Dest\n </button>\n <button [class.active]=\"conn.Direction === 'DestToSource'\"\n (click)=\"OnConnectionDirectionChange('DestToSource')\">\n Dest &rarr; Source\n </button>\n <button [class.active]=\"conn.Direction === 'Both'\"\n (click)=\"OnConnectionDirectionChange('Both')\">\n Both\n </button>\n </div>\n </div>\n\n <!-- Transform pipeline -->\n <div class=\"ve-tp-section\">\n <div class=\"ve-tp-section-header\">\n <label class=\"ve-tp-section-label\">Transform Pipeline</label>\n <button class=\"ve-tp-add-step\" (click)=\"AddTransformStep()\">\n <i class=\"fa-solid fa-plus\"></i> Add Step\n </button>\n </div>\n\n @for (step of conn.TransformSteps; track $index; let si = $index) {\n <div class=\"ve-tp-step\">\n <div class=\"ve-tp-step-header\">\n <span class=\"ve-tp-step-num\">{{ si + 1 }}</span>\n <select class=\"ve-tp-type-select\"\n [value]=\"step.Type\"\n (change)=\"OnConnectionTransformChange(si, $any($event.target).value)\">\n @for (tt of TRANSFORM_TYPES; track tt.Value) {\n <option [value]=\"tt.Value\" [selected]=\"tt.Value === step.Type\">{{ tt.Label }}</option>\n }\n </select>\n <button class=\"ve-tp-remove-step\" (click)=\"RemoveTransformStep(si)\" title=\"Remove step\">\n <i class=\"fa-solid fa-trash-can\"></i>\n </button>\n </div>\n\n <!-- Config fields based on transform type -->\n @if (step.Type !== 'direct') {\n <div class=\"ve-tp-step-config\">\n @for (key of GetConfigKeys(step); track key) {\n <div class=\"ve-tp-config-row\">\n <label>{{ key }}</label>\n <input type=\"text\"\n [value]=\"GetConfigValue(step, key)\"\n (input)=\"OnTransformConfigChange(conn, si, key, $any($event.target).value)\"\n placeholder=\"{{ key }}\" />\n </div>\n }\n </div>\n }\n\n <!-- On error -->\n <div class=\"ve-tp-step-onerror\">\n <label>On Error:</label>\n <select [value]=\"step.OnError\"\n (change)=\"step.OnError = $any($event.target).value; conn.IsDirty = true\">\n <option value=\"Fail\">Fail</option>\n <option value=\"Skip\">Skip</option>\n <option value=\"Null\">Null</option>\n </select>\n </div>\n </div>\n }\n\n @if (conn.TransformSteps.length === 0) {\n <div class=\"ve-tp-no-steps\">\n No transform steps. Data passes through as-is.\n </div>\n }\n </div>\n\n <!-- Delete mapping button -->\n <div class=\"ve-tp-footer\">\n <button class=\"ve-btn ve-btn-danger\" (click)=\"RemoveSelectedConnection()\">\n <i class=\"fa-solid fa-trash-can\"></i> Remove Mapping\n </button>\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: ["/* =========================================================================\n Integration Pipelines - Card Layout + Visual Editor\n ========================================================================= */\n\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* ---------------------------------------------------------------------------\n Container\n --------------------------------------------------------------------------- */\n\n.pipelines-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-page);\n position: relative;\n overflow: hidden;\n}\n\n/* ---------------------------------------------------------------------------\n Toolbar\n --------------------------------------------------------------------------- */\n\n.pipelines-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n z-index: 10;\n}\n\n.toolbar-left {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.toolbar-title {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.toolbar-title i { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 22px;\n height: 22px;\n padding: 0 6px;\n border-radius: 11px;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 11px;\n font-weight: 600;\n}\n\n.toolbar-map-count {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.toolbar-right {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.global-search {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.search-icon {\n position: absolute;\n left: 10px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n pointer-events: none;\n}\n\n.search-input {\n width: 240px;\n height: 32px;\n padding: 0 12px 0 30px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input:focus {\n border-color: var(--mj-color-indigo-500);\n background: var(--mj-bg-surface);\n}\n\n.search-input::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 13px;\n}\n\n.toolbar-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-color-neutral-300);\n color: var(--mj-text-primary);\n}\n\n.toolbar-btn:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n/* ---------------------------------------------------------------------------\n Content area\n --------------------------------------------------------------------------- */\n\n.pipelines-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0;\n}\n\n.content-loading,\n.content-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n}\n\n.content-loading i { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading span { font-size: 14px; }\n.content-empty .empty-icon { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty p { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n/* ---------------------------------------------------------------------------\n Cards list\n --------------------------------------------------------------------------- */\n\n.cards-list {\n flex: 1;\n overflow-y: auto;\n padding: 16px 20px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n box-sizing: border-box;\n min-height: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Pipeline card\n --------------------------------------------------------------------------- */\n\n.pipeline-card {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded {\n border-color: var(--mj-color-indigo-100);\n box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n/* Card header */\n.card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 18px;\n cursor: pointer;\n user-select: none;\n transition: background 150ms ease;\n}\n\n.card-header:hover { background: var(--mj-bg-page); }\n\n.card-header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n flex: 1;\n}\n\n.card-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon {\n font-size: 18px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n width: 24px;\n text-align: center;\n}\n\n.card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-meta { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right {\n display: flex;\n align-items: center;\n gap: 14px;\n flex-shrink: 0;\n}\n\n.card-status-label { font-size: 12px; font-weight: 600; }\n.card-last-sync { font-size: 11px; color: var(--mj-text-disabled); }\n\n/* Mini flow indicator */\n.mini-flow { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest { background: var(--mj-color-success-600); }\n.mini-flow-line { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count {\n font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n/* ---------------------------------------------------------------------------\n Card body (expanded entity maps)\n --------------------------------------------------------------------------- */\n\n.card-body {\n border-top: 1px solid var(--mj-border-subtle);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n /* When card is expanded, card-body takes remaining space in the cards-list scroll area.\n Limit to ~60vh so the table body scrolls internally while headers stay pinned. */\n max-height: 60vh;\n}\n\n/* Search bar within card */\n.card-search-bar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.card-search-icon { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-search-input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.card-search-input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n/* Map table header */\n.map-table-head {\n display: flex;\n align-items: center;\n padding: 6px 18px;\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n border-bottom: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n flex-shrink: 0;\n}\n\n/* Map table body \u2014 scrolls within the constrained card-body */\n.map-table-body {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n}\n\n.map-table-empty {\n padding: 24px 18px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n/* Map table columns */\n/* map-col-toggle width is set in the sync toggle section above */\n.map-col-source { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n/* Map row */\n.map-row {\n display: flex;\n align-items: center;\n padding: 8px 18px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled { opacity: 0.55; }\n.map-row.sync-disabled:hover { opacity: 0.8; }\n\n/* map-status-dot removed \u2014 replaced by sync-toggle */\n\n.map-config-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n.map-edit-hint {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n color: var(--mj-color-neutral-300);\n font-size: 11px;\n transition: color 150ms ease;\n}\n\n.map-row:hover .map-edit-hint { color: var(--mj-color-indigo-500); }\n\n/* ---------------------------------------------------------------------------\n Sync toggle column\n --------------------------------------------------------------------------- */\n\n.map-col-toggle {\n width: 50px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sync-toggle {\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}\n\n.sync-toggle input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.sync-toggle-track {\n width: 30px;\n height: 16px;\n border-radius: 8px;\n background: var(--mj-color-neutral-300);\n position: relative;\n transition: background 200ms ease;\n}\n\n.sync-toggle-track::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--mj-bg-surface);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n transition: transform 200ms ease;\n}\n\n.sync-toggle input:checked + .sync-toggle-track {\n background: var(--mj-color-success-600);\n}\n\n.sync-toggle input:checked + .sync-toggle-track::after {\n transform: translateX(14px);\n}\n\n/* ---------------------------------------------------------------------------\n Direction Badges\n --------------------------------------------------------------------------- */\n\n.direction-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 20px;\n padding: 0 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n flex-shrink: 0;\n}\n\n.direction-badge.pull { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n/* =========================================================================\n VISUAL EDITOR (inline panel, replaces map list)\n ========================================================================= */\n\n.ve-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n background: var(--mj-bg-surface);\n animation: slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n from { opacity: 0; transform: translateX(30px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ---------------------------------------------------------------------------\n VE Header\n --------------------------------------------------------------------------- */\n\n.ve-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 16px;\n}\n\n.ve-header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.ve-back-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 14px;\n flex-shrink: 0;\n transition: all 150ms ease;\n}\n\n.ve-back-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n min-width: 0;\n}\n\n.ve-source-label {\n color: var(--mj-color-indigo-500);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-direction-arrow { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label {\n color: var(--mj-color-success-600);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.ve-header-stats {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.ve-stat {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat strong {\n color: var(--mj-text-primary);\n font-weight: 700;\n}\n\n.ve-stat-sep {\n width: 1px;\n height: 14px;\n background: var(--mj-border-default);\n}\n\n.ve-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.ve-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 14px;\n border-radius: 7px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border: none;\n white-space: nowrap;\n}\n\n.ve-btn-ghost {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary {\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger {\n background: var(--mj-status-error-bg);\n color: var(--mj-color-error-600);\n border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success {\n font-size: 12px;\n color: var(--mj-color-success-600);\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 4px;\n animation: fadeIn 300ms ease;\n}\n\n/* Sync toggle in editor header */\n.ve-sync-toggle { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n/* Action separator */\n.ve-action-sep {\n width: 1px;\n height: 20px;\n background: var(--mj-border-default);\n flex-shrink: 0;\n}\n\n/* Active state for preview toggle buttons */\n.ve-btn-ghost.active {\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n border-color: var(--mj-color-indigo-200);\n}\n\n/* ---------------------------------------------------------------------------\n Data Preview Strip\n --------------------------------------------------------------------------- */\n\n.ve-preview-strip {\n display: flex;\n gap: 1px;\n background: var(--mj-border-default);\n border-bottom: 1px solid var(--mj-border-default);\n max-height: 220px;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.ve-preview-panel {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--mj-bg-page);\n overflow: hidden;\n}\n\n.ve-preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n}\n\n.ve-preview-header i { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n}\n\n.ve-preview-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading,\n.ve-preview-empty {\n padding: 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.ve-preview-loading i { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap {\n flex: 1;\n overflow: auto;\n}\n\n.ve-preview-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 11px;\n}\n\n.ve-preview-table th {\n position: sticky;\n top: 0;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n font-size: 10px;\n padding: 5px 10px;\n text-align: left;\n white-space: nowrap;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table td {\n padding: 4px 10px;\n color: var(--mj-text-primary);\n border-bottom: 1px solid var(--mj-border-subtle);\n max-width: 180px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.ve-preview-table tbody tr:hover td {\n background: var(--mj-color-indigo-50);\n}\n\n/* ---------------------------------------------------------------------------\n Connect mode banner\n --------------------------------------------------------------------------- */\n\n.ve-connect-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 20px;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-700);\n font-size: 13px;\n border-bottom: 1px solid var(--mj-color-indigo-100);\n flex-shrink: 0;\n}\n\n.ve-connect-banner strong { font-weight: 700; }\n\n.ve-connect-cancel {\n margin-left: auto;\n padding: 3px 10px;\n border: 1px solid var(--mj-color-indigo-100);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-color-indigo-700);\n font-size: 12px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-connect-cancel:hover { background: var(--mj-color-indigo-100); }\n\n/* ---------------------------------------------------------------------------\n VE Body\n --------------------------------------------------------------------------- */\n\n.ve-body {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n\n.ve-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 12px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-loading i { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n/* Sections wrapper (replaces ve-canvas-wrapper as the main left area) */\n.ve-sections-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n/* Collapsible section */\n.ve-section {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section:not(.collapsed) {\n flex: 1;\n min-height: 0;\n}\n\n.ve-section.collapsed {\n flex-shrink: 0;\n}\n\n.ve-section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n cursor: pointer;\n user-select: none;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n flex-shrink: 0;\n transition: background 150ms ease;\n}\n\n.ve-section-header:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header i {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n flex-shrink: 0;\n transition: transform 200ms ease;\n}\n\n.ve-section-title {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--mj-text-muted);\n}\n\n.ve-section-badge {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-600);\n padding: 1px 8px;\n border-radius: 4px;\n margin-left: auto;\n}\n\n.ve-section-body {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n animation: fadeIn 200ms ease;\n}\n\n/* Canvas wrapper (takes available space, pushes transform panel right) */\n.ve-canvas-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Column headers\n --------------------------------------------------------------------------- */\n\n.ve-col-headers {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--mj-text-muted);\n}\n\n.ve-col-header.source i { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest i { color: var(--mj-color-success-600); }\n.ve-col-header-spacer { /* SVG gap */ }\n\n.ve-col-count {\n font-size: 10px;\n font-weight: 600;\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-disabled);\n padding: 1px 6px;\n border-radius: 4px;\n}\n\n/* ---------------------------------------------------------------------------\n Column search bars\n --------------------------------------------------------------------------- */\n\n.ve-col-searches {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n flex-shrink: 0;\n border-bottom: 1px solid var(--mj-border-subtle);\n padding: 6px 0;\n}\n\n.ve-col-search {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 12px;\n}\n\n.ve-col-search i {\n font-size: 11px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-col-search input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.ve-col-search input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search input::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer { /* SVG gap */ }\n\n/* ---------------------------------------------------------------------------\n Canvas scroll + grid\n --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.ve-canvas-grid {\n display: grid;\n grid-template-columns: 1fr 200px 1fr;\n position: relative;\n}\n\n/* ---------------------------------------------------------------------------\n Field columns\n --------------------------------------------------------------------------- */\n\n.ve-field-col {\n display: flex;\n flex-direction: column;\n}\n\n.ve-field-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 14px;\n font-size: 13px;\n cursor: pointer;\n transition: background 150ms ease, opacity 150ms ease;\n border-bottom: 1px solid var(--mj-bg-page);\n box-sizing: border-box;\n}\n\n.ve-field-item.mapped { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped {\n opacity: 0.5;\n background: var(--mj-bg-page);\n}\n\n.ve-field-item:hover {\n background: var(--mj-color-indigo-50);\n opacity: 1;\n}\n\n.ve-field-item.connecting {\n background: var(--mj-color-indigo-100);\n opacity: 1;\n box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target:hover {\n background: var(--mj-color-success-100);\n box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n.ve-field-type {\n font-size: 10px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges {\n display: flex;\n gap: 3px;\n flex-shrink: 0;\n}\n\n.ve-fbadge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 3px;\n border-radius: 4px;\n font-size: 9px;\n font-weight: 700;\n}\n\n.ve-fbadge.pk { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty {\n padding: 32px 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n/* ---------------------------------------------------------------------------\n SVG connections\n --------------------------------------------------------------------------- */\n\n.ve-svg {\n display: block;\n}\n\n.ve-conn-line {\n fill: none;\n stroke-width: 2;\n cursor: pointer;\n transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n/* Transform-based line styles \u2014 categorical data-viz colors */\n.ve-conn-line.conn-direct { stroke: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: var(--ve-color-custom, #a855f7); stroke-dasharray: 2 3; }\n\n.ve-conn-line:hover { stroke-width: 3.5; }\n.ve-conn-line.selected { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n/* Connection badge at midpoint */\n.ve-badge-fo { overflow: visible; }\n\n.ve-conn-badge {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct { background: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #a855f7); }\n\n.ve-conn-badge:hover { transform: scale(1.2); }\n.ve-conn-badge.selected { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n/* ---------------------------------------------------------------------------\n Transform Panel (right side)\n --------------------------------------------------------------------------- */\n\n.ve-transform-panel {\n width: 320px;\n flex-shrink: 0;\n border-left: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n background: var(--mj-bg-page);\n animation: slideInRight 200ms ease;\n}\n\n@keyframes slideInRight {\n from { opacity: 0; transform: translateX(20px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.ve-tp-title {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.ve-tp-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 26px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.ve-tp-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n/* Mapping info */\n.ve-tp-mapping-info {\n padding: 14px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.ve-tp-field {\n padding: 4px 10px;\n border-radius: 6px;\n font-weight: 600;\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 110px;\n}\n\n.ve-tp-field.source { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n/* Toggles */\n.ve-tp-toggles {\n display: flex;\n gap: 16px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.ve-tp-toggle-box {\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-color-neutral-300);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: var(--mj-bg-surface);\n transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active {\n background: var(--mj-color-indigo-500);\n border-color: var(--mj-color-indigo-500);\n}\n\n/* Sections */\n.ve-tp-section {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label {\n display: block;\n font-size: 10px;\n font-weight: 700;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 8px;\n}\n\n.ve-tp-section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n/* Direction buttons */\n.ve-tp-direction-btns {\n display: flex;\n gap: 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.ve-tp-direction-btns button {\n flex: 1;\n padding: 6px 8px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns button:last-child { border-right: none; }\n.ve-tp-direction-btns button:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns button.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n/* Transform steps */\n.ve-tp-add-step {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 11px;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ve-tp-add-step:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step {\n margin-top: 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n overflow: hidden;\n}\n\n.ve-tp-step-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--mj-color-indigo-500);\n color: var(--mj-bg-surface);\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.ve-tp-type-select {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-type-select:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 5px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 11px;\n transition: all 150ms ease;\n flex-shrink: 0;\n}\n\n.ve-tp-remove-step:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config {\n padding: 8px 10px;\n}\n\n.ve-tp-config-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.ve-tp-config-row:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row label {\n width: 80px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n flex-shrink: 0;\n}\n\n.ve-tp-config-row input {\n flex: 1;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: 5px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-page);\n outline: none;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n border-top: 1px solid var(--mj-border-subtle);\n background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror label {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n.ve-tp-step-onerror select {\n height: 24px;\n padding: 0 6px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.ve-tp-no-steps {\n padding: 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 12px;\n font-style: italic;\n}\n\n/* Footer */\n.ve-tp-footer {\n padding: 14px 16px;\n margin-top: auto;\n flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Scrollbar styling\n --------------------------------------------------------------------------- */\n\n.cards-list::-webkit-scrollbar,\n.map-table-body::-webkit-scrollbar,\n.ve-canvas-scroll::-webkit-scrollbar,\n.ve-transform-panel::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n.cards-list::-webkit-scrollbar-track,\n.map-table-body::-webkit-scrollbar-track,\n.ve-canvas-scroll::-webkit-scrollbar-track,\n.ve-transform-panel::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.cards-list::-webkit-scrollbar-thumb,\n.map-table-body::-webkit-scrollbar-thumb,\n.ve-canvas-scroll::-webkit-scrollbar-thumb,\n.ve-transform-panel::-webkit-scrollbar-thumb {\n background: var(--mj-color-neutral-300);\n border-radius: 3px;\n}\n\n.cards-list::-webkit-scrollbar-thumb:hover,\n.map-table-body::-webkit-scrollbar-thumb:hover,\n.ve-canvas-scroll::-webkit-scrollbar-thumb:hover,\n.ve-transform-panel::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* ---------------------------------------------------------------------------\n Info Panel\n --------------------------------------------------------------------------- */\n\n.ve-info-body {\n padding: 16px;\n overflow-y: auto;\n}\n\n.ve-info-loading {\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n padding: 20px;\n}\n\n.ve-info-loading i {\n color: var(--mj-color-indigo-500);\n margin-right: 6px;\n}\n\n.ve-info-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.ve-info-card {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 14px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n}\n\n.ve-info-card-icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n background: var(--mj-color-indigo-50);\n color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error {\n background: var(--mj-color-error-100);\n color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running {\n background: var(--mj-color-info-100);\n color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending {\n background: var(--mj-color-warning-100);\n color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.ve-info-card-value {\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ve-info-card-label {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-weight: 500;\n}\n\n.ve-info-details {\n border: 1px solid var(--mj-border-subtle);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ve-info-detail-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px;\n font-size: 12px;\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row:last-child {\n border-bottom: none;\n}\n\n.ve-info-detail-label {\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.ve-info-detail-value {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n"] }]
2051
2051
  }], null, null); })();
2052
2052
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PipelinesComponent, { className: "PipelinesComponent", filePath: "src/Integration/components/pipelines/pipelines.component.ts", lineNumber: 80 }); })();
2053
2053
  export function LoadPipelinesComponent() {