@memberjunction/ng-dashboards 5.16.0 → 5.18.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 (10) hide show
  1. package/dist/Integration/components/connections/connections.component.js +2 -2
  2. package/dist/Integration/components/pipelines/pipelines.component.d.ts +5 -0
  3. package/dist/Integration/components/pipelines/pipelines.component.d.ts.map +1 -1
  4. package/dist/Integration/components/pipelines/pipelines.component.js +309 -249
  5. package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
  6. package/dist/Integration/services/integration-data.service.d.ts +41 -1
  7. package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
  8. package/dist/Integration/services/integration-data.service.js +38 -0
  9. package/dist/Integration/services/integration-data.service.js.map +1 -1
  10. package/package.json +42 -42
package/dist/Integration/components/connections/connections.component.js CHANGED
@@ -2688,7 +2688,7 @@ let ConnectionsComponent = class ConnectionsComponent extends BaseResourceCompon
2688
2688
  i0.ɵɵconditional(ctx.ShowCredentialDialog ? 7 : -1);
2689
2689
  i0.ɵɵadvance();
2690
2690
  i0.ɵɵconditional(ctx.ShowCreateEntity ? 8 : -1);
2691
- } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.LoadingComponent, i4.CredentialDialogComponent, i5.TreeDropdownComponent, i6.ScheduledJobSummaryComponent, i6.ScheduledJobSlidePanelComponent, i7.VisualFieldEditorComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.connections-container[_ngcontent-%COMP%] {\n padding: 24px;\n max-width: 1400px;\n width: 100%;\n margin: 0 auto;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n\n\n\n.connections-container.detail-active[_ngcontent-%COMP%], \n.connections-container.editor-active[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n.connections-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: baseline;\n gap: 12px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n font-size: 24px;\n font-weight: 700;\n margin: 0;\n color: var(--mj-text-primary);\n}\n\n.header-count[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n}\n\n.add-connection-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 300px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n margin: 0 0 24px;\n}\n\n\n\n\n\n\n.card-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n}\n\n\n\n\n\n\n.connection-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.connection-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 16px 0;\n}\n\n.icon-circle[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.icon-large[_ngcontent-%COMP%] {\n font-size: 22px;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: 20px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge-connected[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.status-badge-error[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.status-badge-inactive[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n}\n\n.status-badge-syncing[_ngcontent-%COMP%] {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n\n\n.card-body[_ngcontent-%COMP%] {\n padding: 12px 16px;\n flex: 1;\n}\n\n.card-name[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 2px;\n}\n\n.card-company[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin-bottom: 10px;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 6px;\n}\n\n.meta-separator[_ngcontent-%COMP%] {\n margin: 0 6px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.card-sync-info[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 8px;\n}\n\n.card-sync-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 4px;\n color: var(--mj-text-disabled);\n}\n\n\n\n.card-test-result[_ngcontent-%COMP%] {\n font-size: 12px;\n padding: 6px 10px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n}\n\n.card-test-result.test-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.card-test-result.test-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.card-test-result[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.card-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.card-delete-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n background: none;\n border: 1px solid transparent;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 6px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n transition: all 0.15s;\n}\n\n.card-delete-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error-bg);\n border-color: var(--mj-status-error-border);\n color: var(--mj-status-error);\n}\n\n.menu-trigger[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.card-menu-dropdown[_ngcontent-%COMP%] {\n position: absolute;\n right: 0;\n top: 100%;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n min-width: 160px;\n z-index: 50;\n padding: 4px;\n}\n\n.menu-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 12px;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n border-radius: 6px;\n transition: background 0.15s;\n text-align: left;\n}\n\n.menu-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.menu-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.menu-item-danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error-bg);\n}\n\n\n\n\n\n\n.new-connection-card[_ngcontent-%COMP%] {\n border: 2px dashed var(--mj-border-strong);\n background: var(--mj-bg-page);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.new-connection-card[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n box-shadow: none;\n transform: none;\n}\n\n.new-card-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n}\n\n.new-card-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: var(--mj-bg-surface-active);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n color: var(--mj-text-muted);\n transition: background 0.2s, color 0.2s;\n}\n\n.new-connection-card[_ngcontent-%COMP%]:hover .new-card-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.new-card-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-muted);\n}\n\n.new-connection-card[_ngcontent-%COMP%]:hover .new-card-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.wizard-inline[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-width: 720px;\n margin: 0 auto;\n}\n\n\n\n.wizard-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 0 0 20px;\n}\n\n.wizard-back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n padding: 6px 10px;\n border-radius: 6px;\n transition: background 0.15s, color 0.15s;\n}\n\n.wizard-back-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.wizard-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n\n\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 32px;\n gap: 0;\n}\n\n.step-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n position: relative;\n}\n\n.step-circle[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 600;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n border: 2px solid var(--mj-border-default);\n transition: all 0.2s;\n}\n\n.step-active[_ngcontent-%COMP%] .step-circle[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.step-completed[_ngcontent-%COMP%] .step-circle[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n}\n\n.step-active[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.step-completed[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.step-line[_ngcontent-%COMP%] {\n width: 48px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 8px;\n margin-bottom: 20px;\n transition: background 0.2s;\n}\n\n.step-line-active[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n\n\n\n.wizard-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 0 24px 24px;\n}\n\n.step-content[_ngcontent-%COMP%] {\n min-height: 300px;\n}\n\n.step-content-centered[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.step-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 20px;\n}\n\n.step-content-centered[_ngcontent-%COMP%] .step-title[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n\n\n.search-bar[_ngcontent-%COMP%] {\n position: relative;\n margin-bottom: 20px;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 14px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 14px 10px 40px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n\n\n.no-integrations[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: var(--mj-text-disabled);\n text-align: center;\n}\n\n.no-integrations[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n margin-bottom: 12px;\n}\n\n.no-integrations[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-muted);\n margin: 0 0 4px;\n}\n\n.no-integrations-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.integration-picker-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n.integration-picker-card[_ngcontent-%COMP%] {\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n padding: 16px;\n cursor: pointer;\n text-align: center;\n transition: border-color 0.2s, background 0.15s;\n}\n\n.integration-picker-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-page);\n}\n\n.integration-picker-card.picker-selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: var(--mj-status-info-bg);\n}\n\n.picker-icon-circle[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n margin: 0 auto 10px;\n font-size: 18px;\n}\n\n.picker-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.picker-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n line-height: 1.3;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 6px;\n}\n\n.optional-label[_ngcontent-%COMP%] {\n font-weight: 400;\n color: var(--mj-text-disabled);\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input[_ngcontent-%COMP%]:disabled {\n background: var(--mj-bg-page);\n color: var(--mj-text-muted);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 72px;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n\n\n.credential-selected[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n border-radius: 8px;\n}\n\n.credential-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-status-success-text);\n font-size: 14px;\n font-weight: 500;\n}\n\n.credential-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.credential-clear[_ngcontent-%COMP%] {\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n font-size: 14px;\n padding: 4px;\n border-radius: 4px;\n transition: color 0.15s;\n}\n\n.credential-clear[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n}\n\n.credential-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.credential-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.credential-loading[_ngcontent-%COMP%] {\n padding: 16px 0;\n}\n\n.credential-list[_ngcontent-%COMP%] {\n margin-top: 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.credential-list-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n cursor: pointer;\n font-size: 14px;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n}\n\n.credential-list-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.credential-list-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.credential-list-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.test-prompt[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.test-hint[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n.test-running[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n color: var(--mj-brand-primary);\n}\n\n.test-spinner[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.test-running[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 500;\n margin: 0;\n}\n\n\n\n.test-result[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 24px;\n border-radius: 12px;\n max-width: 400px;\n}\n\n.test-result-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n}\n\n.test-result-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n}\n\n.test-result-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n animation: _ngcontent-%COMP%_scaleIn 0.3s ease-out;\n}\n\n.test-result-success[_ngcontent-%COMP%] .test-result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.test-result-failure[_ngcontent-%COMP%] .test-result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n@keyframes _ngcontent-%COMP%_scaleIn {\n from {\n transform: scale(0.5);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.test-result-message[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.test-result-detail[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.test-retry-btn[_ngcontent-%COMP%] {\n margin-top: 4px;\n}\n\n\n\n.toggle-switch[_ngcontent-%COMP%] {\n position: relative;\n display: inline-block;\n width: 44px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.toggle-switch[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider[_ngcontent-%COMP%] {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-border-strong);\n border-radius: 24px;\n transition: background 0.2s;\n}\n\n.toggle-slider[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n height: 18px;\n width: 18px;\n left: 3px;\n bottom: 3px;\n background: var(--mj-bg-surface);\n border-radius: 50%;\n transition: transform 0.2s;\n}\n\n.toggle-switch[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .toggle-slider[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.toggle-switch[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .toggle-slider[_ngcontent-%COMP%]::before {\n transform: translateX(20px);\n}\n\n\n\n\n\n\n.wizard-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.footer-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n\n\n\n@media (max-width: 768px) {\n .connections-container[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .card-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .integration-picker-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .step-indicator[_ngcontent-%COMP%] {\n padding: 16px;\n overflow-x: auto;\n }\n\n .step-line[_ngcontent-%COMP%] {\n width: 24px;\n }\n\n .credential-actions[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n}\n\n@media (max-width: 480px) {\n .integration-picker-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .card-footer[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n\n\n\n\n\n\n.delete-confirm-overlay[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: 12px;\n animation: _ngcontent-%COMP%_fadeIn 150ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.delete-confirm-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 20px;\n text-align: center;\n}\n\n.delete-warn-icon[_ngcontent-%COMP%] {\n font-size: 28px;\n color: var(--mj-status-error);\n}\n\n.delete-confirm-text[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n max-width: 220px;\n}\n\n.delete-confirm-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n\n\n\n\n\n.edit-panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.1);\n z-index: 99;\n opacity: 0;\n pointer-events: none;\n transition: opacity 300ms ease;\n}\n\n.edit-panel-backdrop.open[_ngcontent-%COMP%] {\n opacity: 1;\n pointer-events: auto;\n}\n\n.edit-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n max-width: 100%;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);\n z-index: 100;\n transform: translateX(100%);\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.edit-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.edit-panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.edit-panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.edit-icon-circle[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 14px;\n}\n\n.edit-close-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 14px;\n transition: all 150ms ease;\n}\n\n.edit-close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.edit-panel-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 20px;\n}\n\n.edit-panel-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.edit-form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.edit-form-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.edit-form-input[_ngcontent-%COMP%] {\n height: 36px;\n padding: 0 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.edit-form-input[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.edit-readonly-field[_ngcontent-%COMP%] {\n padding: 8px 12px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.edit-toggle-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.edit-toggle-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n}\n\n.edit-toggle-label.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.edit-credential-selected[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-page);\n}\n\n.edit-credential-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.edit-credential-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.edit-credential-clear[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 150ms ease;\n}\n\n.edit-credential-clear[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.edit-credential-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.edit-credential-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 6px;\n max-height: 180px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n}\n\n.edit-credential-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 150ms ease;\n}\n\n.edit-credential-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.edit-credential-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.edit-panel-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.card-clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n\n\n\n\n\n.detail-view[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n\n.detail-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding-bottom: 20px;\n border-bottom: 1px solid var(--mj-border-subtle);\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.detail-header-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.detail-header-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.detail-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.detail-header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n\n\n.schedule-section[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n padding: 16px 20px;\n margin-bottom: 16px;\n}\n\n.schedule-section-header[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.schedule-section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.8rem;\n font-weight: 700;\n color: #475569;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.schedule-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #0076b6;\n}\n\n.schedule-empty[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0;\n}\n\n.schedule-empty-text[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n color: #94a3b8;\n}\n\n.schedule-create-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: linear-gradient(135deg, #0076b6 0%, #005a8c 100%);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.8rem;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.schedule-create-btn[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 118, 182, 0.4);\n}\n\n\n\n.detail-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.detail-toolbar-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-map-count[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.detail-search[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n}\n\n.detail-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.detail-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n border: none;\n outline: none;\n background: transparent;\n font-size: 13px;\n color: var(--mj-text-primary);\n width: 200px;\n}\n\n.detail-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n\n\n.add-map-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n}\n\n.add-map-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n border-color: var(--mj-brand-primary);\n}\n\n.add-map-btn-lg[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding: 10px 20px;\n font-size: 14px;\n}\n\n\n\n.add-map-panel[_ngcontent-%COMP%] {\n padding: 16px;\n margin-bottom: 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n.add-map-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n}\n\n.add-map-field[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.add-map-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 6px;\n}\n\n.add-map-select[_ngcontent-%COMP%] {\n width: 100%;\n height: 34px;\n padding: 0 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.add-map-select[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.add-map-direction-col[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 7px 12px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 13px;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:last-child {\n border-right: none;\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.add-map-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.add-map-save-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 16px;\n border: none;\n border-radius: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-save-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.add-map-save-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.add-map-cancel-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 34px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.add-map-cancel-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.add-map-loading[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n.add-map-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n margin-right: 4px;\n}\n\n.add-map-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n font-style: italic;\n}\n\n\n\n.add-map-entity-field[_ngcontent-%COMP%] {\n flex: 2;\n min-width: 280px;\n}\n\n\n\n.entity-picker-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.entity-picker-row[_ngcontent-%COMP%] mj-tree-dropdown[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.new-entity-btn[_ngcontent-%COMP%] {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: all 0.15s ease;\n}\n\n.new-entity-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n\n\n\n\n\n.sync-result-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 12px;\n animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n.sync-result-banner.sync-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.sync-result-banner.sync-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n\n\n\n\n\n.auto-map-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-map-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.auto-map-result[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n}\n\n.auto-map-result.auto-map-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.auto-map-result.auto-map-partial[_ngcontent-%COMP%] {\n background: var(--mj-status-warning-bg);\n border: 1px solid var(--mj-status-warning-border);\n color: var(--mj-status-warning-text);\n}\n\n.auto-map-result.auto-map-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n.auto-map-result-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}\n\n.auto-map-errors[_ngcontent-%COMP%] {\n margin-top: 6px;\n font-size: 12px;\n}\n\n.auto-map-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n}\n\n\n\n\n\n\n.new-entity-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n.new-entity-dialog[_ngcontent-%COMP%] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 640px;\n max-width: 90vw;\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n.new-entity-dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.new-entity-dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-close[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.new-entity-dialog-desc[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.new-entity-dialog-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.new-entity-dialog-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-end;\n gap: 8px;\n}\n\n.new-entity-dialog-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 120px;\n}\n\n.new-entity-dialog-field-wide[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.new-entity-dialog-label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.new-entity-dialog-input[_ngcontent-%COMP%] {\n padding: 8px 12px;\n font-size: var(--mj-text-sm);\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n transition: border-color 0.15s ease;\n}\n\n.new-entity-dialog-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);\n}\n\n.new-entity-dialog-dot[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n padding-bottom: 6px;\n user-select: none;\n}\n\n.new-entity-dialog-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n padding: 8px 0 4px;\n}\n\n.new-entity-dialog-hint[_ngcontent-%COMP%] {\n font-style: italic;\n color: var(--mj-text-disabled);\n font-weight: 400;\n}\n\n.new-entity-dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.new-entity-preview-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-inverse);\n background: var(--mj-brand-primary);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: background 0.15s ease;\n}\n\n.new-entity-preview-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n}\n\n.new-entity-preview-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.new-entity-dialog-done-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-done-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n\n\n.new-entity-next-steps[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 14px 16px;\n}\n\n.new-entity-next-steps[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-brand-primary-hover);\n}\n\n.new-entity-next-steps[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n.new-entity-next-steps[_ngcontent-%COMP%] ol[_ngcontent-%COMP%] {\n margin: 0;\n padding-left: 20px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n line-height: 1.7;\n}\n\n\n\n.ddl-copy-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.ddl-copy-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n\n\n.ddl-warnings[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.ddl-warning[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-status-warning);\n background: var(--mj-status-warning-subtle);\n padding: 6px 10px;\n border-radius: var(--mj-radius-sm);\n border-left: 3px solid var(--mj-status-warning);\n}\n\n.ddl-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n.ddl-preview-block[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n max-height: 300px;\n display: flex;\n flex-direction: column;\n}\n\n.ddl-preview-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.ddl-preview-code[_ngcontent-%COMP%] {\n margin: 0;\n padding: 12px 16px;\n font-size: 12px;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n line-height: 1.6;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n flex: 1;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.detail-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n margin-bottom: 12px;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 6px;\n}\n\n.detail-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 13px;\n margin: 0;\n max-width: 400px;\n}\n\n\n\n.detail-table-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px 8px 0 0;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--mj-text-secondary);\n}\n\n.detail-table-body[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-top: none;\n border-radius: 0 0 8px 8px;\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n}\n\n.detail-map-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n font-size: 13px;\n}\n\n.detail-map-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.detail-map-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n cursor: pointer;\n}\n\n.detail-map-row.sync-disabled[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n\n\n.dt-col-toggle[_ngcontent-%COMP%] {\n width: 60px;\n flex-shrink: 0;\n}\n\n.dt-col-source[_ngcontent-%COMP%] {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.dt-col-direction[_ngcontent-%COMP%] {\n width: 80px;\n flex-shrink: 0;\n text-align: center;\n}\n\n.dt-col-dest[_ngcontent-%COMP%] {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--mj-text-primary);\n}\n\n.dt-col-meta[_ngcontent-%COMP%] {\n width: 80px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 6px;\n justify-content: flex-end;\n}\n\n\n\n.direction-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 4px;\n white-space: nowrap;\n}\n\n.direction-badge.pull[_ngcontent-%COMP%] {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n.direction-badge.push[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.direction-badge.bidirectional[_ngcontent-%COMP%] {\n background: var(--mj-status-warning-subtle);\n color: var(--mj-status-warning);\n}\n\n\n\n.detail-config-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n font-size: 11px;\n}\n\n\n\n.detail-back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 16px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-back-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n\n\n.detail-edit-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 14px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n\n\n.map-edit-hint[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 11px;\n transition: color 0.15s;\n}\n\n.detail-map-row[_ngcontent-%COMP%]:hover .map-edit-hint[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.ve-header-title-inline[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n}\n\n.ve-source-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.ve-direction-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-dest-label[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.ve-stat-inline[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat-inline[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n.detail-table-empty[_ngcontent-%COMP%] {\n padding: 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}"] });
2691
+ } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.LoadingComponent, i4.CredentialDialogComponent, i5.TreeDropdownComponent, i6.ScheduledJobSummaryComponent, i6.ScheduledJobSlidePanelComponent, i7.VisualFieldEditorComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.connections-container[_ngcontent-%COMP%] {\n padding: 24px;\n max-width: 1400px;\n width: 100%;\n margin: 0 auto;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n\n\n\n.connections-container.detail-active[_ngcontent-%COMP%], \n.connections-container.editor-active[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n.connections-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: baseline;\n gap: 12px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n font-size: 24px;\n font-weight: 700;\n margin: 0;\n color: var(--mj-text-primary);\n}\n\n.header-count[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n}\n\n.add-connection-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 300px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n margin: 0 0 24px;\n}\n\n\n\n\n\n\n.card-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n}\n\n\n\n\n\n\n.connection-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.connection-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 16px 0;\n}\n\n.icon-circle[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.icon-large[_ngcontent-%COMP%] {\n font-size: 22px;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: 20px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge-connected[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.status-badge-error[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.status-badge-inactive[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n}\n\n.status-badge-syncing[_ngcontent-%COMP%] {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n\n\n.card-body[_ngcontent-%COMP%] {\n padding: 12px 16px;\n flex: 1;\n}\n\n.card-name[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 2px;\n}\n\n.card-company[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin-bottom: 10px;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 6px;\n}\n\n.meta-separator[_ngcontent-%COMP%] {\n margin: 0 6px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.card-sync-info[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 8px;\n}\n\n.card-sync-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 4px;\n color: var(--mj-text-disabled);\n}\n\n\n\n.card-test-result[_ngcontent-%COMP%] {\n font-size: 12px;\n padding: 6px 10px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n}\n\n.card-test-result.test-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.card-test-result.test-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.card-test-result[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.card-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.card-delete-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n background: none;\n border: 1px solid transparent;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 6px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n transition: all 0.15s;\n}\n\n.card-delete-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error-bg);\n border-color: var(--mj-status-error-border);\n color: var(--mj-status-error);\n}\n\n.menu-trigger[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.card-menu-dropdown[_ngcontent-%COMP%] {\n position: absolute;\n right: 0;\n top: 100%;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n min-width: 160px;\n z-index: 50;\n padding: 4px;\n}\n\n.menu-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 12px;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n border-radius: 6px;\n transition: background 0.15s;\n text-align: left;\n}\n\n.menu-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.menu-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.menu-item-danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error-bg);\n}\n\n\n\n\n\n\n.new-connection-card[_ngcontent-%COMP%] {\n border: 2px dashed var(--mj-border-strong);\n background: var(--mj-bg-page);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.new-connection-card[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n box-shadow: none;\n transform: none;\n}\n\n.new-card-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n}\n\n.new-card-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: var(--mj-bg-surface-active);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n color: var(--mj-text-muted);\n transition: background 0.2s, color 0.2s;\n}\n\n.new-connection-card[_ngcontent-%COMP%]:hover .new-card-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.new-card-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-muted);\n}\n\n.new-connection-card[_ngcontent-%COMP%]:hover .new-card-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.wizard-inline[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-width: 720px;\n margin: 0 auto;\n}\n\n\n\n.wizard-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 0 0 20px;\n}\n\n.wizard-back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n padding: 6px 10px;\n border-radius: 6px;\n transition: background 0.15s, color 0.15s;\n}\n\n.wizard-back-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.wizard-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n\n\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 32px;\n gap: 0;\n}\n\n.step-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n position: relative;\n}\n\n.step-circle[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 600;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n border: 2px solid var(--mj-border-default);\n transition: all 0.2s;\n}\n\n.step-active[_ngcontent-%COMP%] .step-circle[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.step-completed[_ngcontent-%COMP%] .step-circle[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n}\n\n.step-active[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.step-completed[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.step-line[_ngcontent-%COMP%] {\n width: 48px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 8px;\n margin-bottom: 20px;\n transition: background 0.2s;\n}\n\n.step-line-active[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n\n\n\n.wizard-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 0 24px 24px;\n}\n\n.step-content[_ngcontent-%COMP%] {\n min-height: 300px;\n}\n\n.step-content-centered[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.step-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 20px;\n}\n\n.step-content-centered[_ngcontent-%COMP%] .step-title[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n\n\n.search-bar[_ngcontent-%COMP%] {\n position: relative;\n margin-bottom: 20px;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 14px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 14px 10px 40px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n\n\n.no-integrations[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: var(--mj-text-disabled);\n text-align: center;\n}\n\n.no-integrations[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n margin-bottom: 12px;\n}\n\n.no-integrations[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-muted);\n margin: 0 0 4px;\n}\n\n.no-integrations-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.integration-picker-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n.integration-picker-card[_ngcontent-%COMP%] {\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n padding: 16px;\n cursor: pointer;\n text-align: center;\n transition: border-color 0.2s, background 0.15s;\n}\n\n.integration-picker-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-page);\n}\n\n.integration-picker-card.picker-selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: var(--mj-status-info-bg);\n}\n\n.picker-icon-circle[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n margin: 0 auto 10px;\n font-size: 18px;\n}\n\n.picker-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.picker-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n line-height: 1.3;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 6px;\n}\n\n.optional-label[_ngcontent-%COMP%] {\n font-weight: 400;\n color: var(--mj-text-disabled);\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input[_ngcontent-%COMP%]:disabled {\n background: var(--mj-bg-page);\n color: var(--mj-text-muted);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 72px;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n\n\n.credential-selected[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n border-radius: 8px;\n}\n\n.credential-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-status-success-text);\n font-size: 14px;\n font-weight: 500;\n}\n\n.credential-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.credential-clear[_ngcontent-%COMP%] {\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n font-size: 14px;\n padding: 4px;\n border-radius: 4px;\n transition: color 0.15s;\n}\n\n.credential-clear[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n}\n\n.credential-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.credential-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.credential-loading[_ngcontent-%COMP%] {\n padding: 16px 0;\n}\n\n.credential-list[_ngcontent-%COMP%] {\n margin-top: 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.credential-list-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n cursor: pointer;\n font-size: 14px;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n}\n\n.credential-list-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.credential-list-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.credential-list-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.test-prompt[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.test-hint[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n.test-running[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n color: var(--mj-brand-primary);\n}\n\n.test-spinner[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.test-running[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 500;\n margin: 0;\n}\n\n\n\n.test-result[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 24px;\n border-radius: 12px;\n max-width: 400px;\n}\n\n.test-result-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n}\n\n.test-result-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n}\n\n.test-result-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n animation: _ngcontent-%COMP%_scaleIn 0.3s ease-out;\n}\n\n.test-result-success[_ngcontent-%COMP%] .test-result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.test-result-failure[_ngcontent-%COMP%] .test-result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n@keyframes _ngcontent-%COMP%_scaleIn {\n from {\n transform: scale(0.5);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.test-result-message[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.test-result-detail[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.test-retry-btn[_ngcontent-%COMP%] {\n margin-top: 4px;\n}\n\n\n\n.toggle-switch[_ngcontent-%COMP%] {\n position: relative;\n display: inline-block;\n width: 44px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.toggle-switch[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider[_ngcontent-%COMP%] {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-border-strong);\n border-radius: 24px;\n transition: background 0.2s;\n}\n\n.toggle-slider[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n height: 18px;\n width: 18px;\n left: 3px;\n bottom: 3px;\n background: var(--mj-bg-surface);\n border-radius: 50%;\n transition: transform 0.2s;\n}\n\n.toggle-switch[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .toggle-slider[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.toggle-switch[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .toggle-slider[_ngcontent-%COMP%]::before {\n transform: translateX(20px);\n}\n\n\n\n\n\n\n.wizard-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.footer-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n\n\n\n@media (max-width: 768px) {\n .connections-container[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .card-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .integration-picker-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .step-indicator[_ngcontent-%COMP%] {\n padding: 16px;\n overflow-x: auto;\n }\n\n .step-line[_ngcontent-%COMP%] {\n width: 24px;\n }\n\n .credential-actions[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n}\n\n@media (max-width: 480px) {\n .integration-picker-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .card-footer[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n\n\n\n\n\n\n.delete-confirm-overlay[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: 12px;\n animation: _ngcontent-%COMP%_fadeIn 150ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.delete-confirm-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 20px;\n text-align: center;\n}\n\n.delete-warn-icon[_ngcontent-%COMP%] {\n font-size: 28px;\n color: var(--mj-status-error);\n}\n\n.delete-confirm-text[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n max-width: 220px;\n}\n\n.delete-confirm-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n\n\n\n\n\n.edit-panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.1);\n z-index: 99;\n opacity: 0;\n pointer-events: none;\n transition: opacity 300ms ease;\n}\n\n.edit-panel-backdrop.open[_ngcontent-%COMP%] {\n opacity: 1;\n pointer-events: auto;\n}\n\n.edit-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n max-width: 100%;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);\n z-index: 100;\n transform: translateX(100%);\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.edit-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.edit-panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.edit-panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.edit-icon-circle[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 14px;\n}\n\n.edit-close-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 14px;\n transition: all 150ms ease;\n}\n\n.edit-close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.edit-panel-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 20px;\n}\n\n.edit-panel-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.edit-form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.edit-form-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.edit-form-input[_ngcontent-%COMP%] {\n height: 36px;\n padding: 0 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.edit-form-input[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.edit-readonly-field[_ngcontent-%COMP%] {\n padding: 8px 12px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.edit-toggle-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.edit-toggle-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n}\n\n.edit-toggle-label.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.edit-credential-selected[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-page);\n}\n\n.edit-credential-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.edit-credential-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.edit-credential-clear[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 150ms ease;\n}\n\n.edit-credential-clear[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.edit-credential-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.edit-credential-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 6px;\n max-height: 180px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n}\n\n.edit-credential-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 150ms ease;\n}\n\n.edit-credential-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.edit-credential-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.edit-panel-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.card-clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n\n\n\n\n\n.detail-view[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n\n.detail-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding-bottom: 20px;\n border-bottom: 1px solid var(--mj-border-subtle);\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.detail-header-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.detail-header-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.detail-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.detail-header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n\n\n.schedule-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n padding: 16px 20px;\n margin-bottom: 16px;\n}\n\n.schedule-section-header[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.schedule-section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.schedule-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.schedule-empty[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0;\n}\n\n.schedule-empty-text[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n color: var(--mj-text-disabled);\n}\n\n.schedule-create-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-active) 100%);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.8rem;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.schedule-create-btn[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.detail-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.detail-toolbar-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-map-count[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.detail-search[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n}\n\n.detail-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.detail-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n border: none;\n outline: none;\n background: transparent;\n font-size: 13px;\n color: var(--mj-text-primary);\n width: 200px;\n}\n\n.detail-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n\n\n.add-map-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n}\n\n.add-map-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n border-color: var(--mj-brand-primary);\n}\n\n.apply-all-btn[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.apply-all-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n}\n\n.apply-all-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.add-map-btn-lg[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding: 10px 20px;\n font-size: 14px;\n}\n\n\n\n.add-map-panel[_ngcontent-%COMP%] {\n padding: 16px;\n margin-bottom: 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n.add-map-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n}\n\n.add-map-field[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.add-map-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 6px;\n}\n\n.add-map-select[_ngcontent-%COMP%] {\n width: 100%;\n height: 34px;\n padding: 0 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.add-map-select[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.add-map-direction-col[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 7px 12px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 13px;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:last-child {\n border-right: none;\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.add-map-direction-btns[_ngcontent-%COMP%] button.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.add-map-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.add-map-save-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 16px;\n border: none;\n border-radius: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-save-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.add-map-save-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.add-map-cancel-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 34px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.add-map-cancel-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.add-map-loading[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n.add-map-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n margin-right: 4px;\n}\n\n.add-map-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n font-style: italic;\n}\n\n\n\n.add-map-entity-field[_ngcontent-%COMP%] {\n flex: 2;\n min-width: 280px;\n}\n\n\n\n.entity-picker-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.entity-picker-row[_ngcontent-%COMP%] mj-tree-dropdown[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.new-entity-btn[_ngcontent-%COMP%] {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: all 0.15s ease;\n}\n\n.new-entity-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n\n\n\n\n\n.sync-result-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 12px;\n animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n.sync-result-banner.sync-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.sync-result-banner.sync-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n\n\n\n\n\n.auto-map-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-map-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.auto-map-result[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n}\n\n.auto-map-result.auto-map-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.auto-map-result.auto-map-partial[_ngcontent-%COMP%] {\n background: var(--mj-status-warning-bg);\n border: 1px solid var(--mj-status-warning-border);\n color: var(--mj-status-warning-text);\n}\n\n.auto-map-result.auto-map-failure[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n.auto-map-result-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}\n\n.auto-map-errors[_ngcontent-%COMP%] {\n margin-top: 6px;\n font-size: 12px;\n}\n\n.auto-map-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n}\n\n\n\n\n\n\n.new-entity-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n.new-entity-dialog[_ngcontent-%COMP%] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 640px;\n max-width: 90vw;\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n.new-entity-dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.new-entity-dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-close[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.new-entity-dialog-desc[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.new-entity-dialog-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.new-entity-dialog-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-end;\n gap: 8px;\n}\n\n.new-entity-dialog-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 120px;\n}\n\n.new-entity-dialog-field-wide[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.new-entity-dialog-label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.new-entity-dialog-input[_ngcontent-%COMP%] {\n padding: 8px 12px;\n font-size: var(--mj-text-sm);\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n transition: border-color 0.15s ease;\n}\n\n.new-entity-dialog-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);\n}\n\n.new-entity-dialog-dot[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n padding-bottom: 6px;\n user-select: none;\n}\n\n.new-entity-dialog-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n padding: 8px 0 4px;\n}\n\n.new-entity-dialog-hint[_ngcontent-%COMP%] {\n font-style: italic;\n color: var(--mj-text-disabled);\n font-weight: 400;\n}\n\n.new-entity-dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.new-entity-preview-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-inverse);\n background: var(--mj-brand-primary);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: background 0.15s ease;\n}\n\n.new-entity-preview-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n}\n\n.new-entity-preview-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.new-entity-dialog-done-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-done-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n\n\n.new-entity-next-steps[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 14px 16px;\n}\n\n.new-entity-next-steps[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-brand-primary-hover);\n}\n\n.new-entity-next-steps[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n.new-entity-next-steps[_ngcontent-%COMP%] ol[_ngcontent-%COMP%] {\n margin: 0;\n padding-left: 20px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n line-height: 1.7;\n}\n\n\n\n.ddl-copy-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.ddl-copy-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n\n\n.ddl-warnings[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.ddl-warning[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-status-warning);\n background: var(--mj-status-warning-subtle);\n padding: 6px 10px;\n border-radius: var(--mj-radius-sm);\n border-left: 3px solid var(--mj-status-warning);\n}\n\n.ddl-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n.ddl-preview-block[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n max-height: 300px;\n display: flex;\n flex-direction: column;\n}\n\n.ddl-preview-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.ddl-preview-code[_ngcontent-%COMP%] {\n margin: 0;\n padding: 12px 16px;\n font-size: 12px;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n line-height: 1.6;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n flex: 1;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.detail-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n margin-bottom: 12px;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 6px;\n}\n\n.detail-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 13px;\n margin: 0;\n max-width: 400px;\n}\n\n\n\n.detail-table-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px 8px 0 0;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--mj-text-secondary);\n}\n\n.detail-table-body[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-top: none;\n border-radius: 0 0 8px 8px;\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n}\n\n.detail-map-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n font-size: 13px;\n}\n\n.detail-map-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.detail-map-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n cursor: pointer;\n}\n\n.detail-map-row.sync-disabled[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n\n\n.dt-col-toggle[_ngcontent-%COMP%] {\n width: 60px;\n flex-shrink: 0;\n}\n\n.dt-col-source[_ngcontent-%COMP%] {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.dt-col-direction[_ngcontent-%COMP%] {\n width: 80px;\n flex-shrink: 0;\n text-align: center;\n}\n\n.dt-col-dest[_ngcontent-%COMP%] {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--mj-text-primary);\n}\n\n.dt-col-meta[_ngcontent-%COMP%] {\n width: 80px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 6px;\n justify-content: flex-end;\n}\n\n\n\n.direction-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 4px;\n white-space: nowrap;\n}\n\n.direction-badge.pull[_ngcontent-%COMP%] {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n.direction-badge.push[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.direction-badge.bidirectional[_ngcontent-%COMP%] {\n background: var(--mj-status-warning-subtle);\n color: var(--mj-status-warning);\n}\n\n\n\n.detail-config-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n font-size: 11px;\n}\n\n\n\n.detail-back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 16px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-back-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n\n\n.detail-edit-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 14px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n\n\n.map-edit-hint[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 11px;\n transition: color 0.15s;\n}\n\n.detail-map-row[_ngcontent-%COMP%]:hover .map-edit-hint[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.ve-header-title-inline[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n}\n\n.ve-source-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.ve-direction-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-dest-label[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.ve-stat-inline[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat-inline[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n.detail-table-empty[_ngcontent-%COMP%] {\n padding: 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n\n\n\n\n\n.discovered-objects-section[_ngcontent-%COMP%] {\n margin: 12px 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n overflow: hidden;\n}\n\n.discovered-objects-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.discovered-objects-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.discovered-objects-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.discovered-count[_ngcontent-%COMP%] {\n font-weight: 400;\n color: var(--mj-text-muted);\n font-size: 12px;\n}\n\n.discovered-objects-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.discovered-action-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: none;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n padding: 3px 10px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n\n.discovered-action-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.discovered-action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.discovered-loading[_ngcontent-%COMP%], \n.discovered-empty[_ngcontent-%COMP%] {\n padding: 16px;\n text-align: center;\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.discovered-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n.discovered-objects-list[_ngcontent-%COMP%] {\n max-height: 280px;\n overflow-y: auto;\n}\n\n.discovered-object-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 7px 14px;\n cursor: pointer;\n transition: background 0.1s;\n border-bottom: 1px solid var(--mj-border-subtle);\n font-size: 13px;\n}\n\n.discovered-object-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.discovered-object-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.discovered-object-row.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n}\n\n.discovered-object-row[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.discovered-object-name[_ngcontent-%COMP%] {\n flex: 1;\n color: var(--mj-text-primary);\n font-weight: 500;\n}\n\n.discovered-object-api-name[_ngcontent-%COMP%] {\n flex: 1;\n color: var(--mj-text-muted);\n font-size: 12px;\n font-family: monospace;\n}\n\n.discovered-object-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.discovered-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n font-size: 10px;\n}\n\n.discovered-badge.incremental[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n background: var(--mj-status-success-bg);\n}\n\n.discovered-badge.writable[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}"] });
2692
2692
  };
2693
2693
  ConnectionsComponent = __decorate([
2694
2694
  RegisterClass(BaseResourceComponent, 'IntegrationConnections')
@@ -2696,7 +2696,7 @@ ConnectionsComponent = __decorate([
2696
2696
  export { ConnectionsComponent };
2697
2697
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConnectionsComponent, [{
2698
2698
  type: Component,
2699
- args: [{ standalone: false, selector: 'app-integration-connections', template: "<!-- Main container -->\n<div class=\"connections-container\" [class.detail-active]=\"!!SelectedSummary\"\n [class.editor-active]=\"!!EditorEntityMap\">\n\n <!-- ======================================================================\n CARD GRID VIEW (shown when no wizard and no detail selected)\n ====================================================================== -->\n @if (!WizardOpen && !SelectedSummary) {\n <!-- Header -->\n <div class=\"connections-header\">\n <div class=\"header-left\">\n <h2 class=\"header-title\">Integrations</h2>\n <span class=\"header-count\">{{ Connections.length }} integration{{ Connections.length !== 1 ? 's' : '' }}</span>\n </div>\n <button kendoButton (click)=\"OpenWizard()\" class=\"add-connection-btn\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Integration\n </button>\n </div>\n\n <!-- Loading state -->\n @if (IsLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading integrations...\"></mj-loading>\n </div>\n }\n\n <!-- Empty state -->\n @if (!IsLoading && Connections.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-plug empty-icon\"></i>\n <h3>No integrations yet</h3>\n <p>Connect your first external system to start syncing data.</p>\n <button kendoButton (click)=\"OpenWizard()\" themeColor=\"primary\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Your First Integration\n </button>\n </div>\n }\n\n <!-- Card grid -->\n @if (!IsLoading && Connections.length > 0) {\n <div class=\"card-grid\">\n @for (summary of Connections; track summary.Integration.ID) {\n <div class=\"connection-card\">\n <!-- Card header + body: clickable to open detail view -->\n <div class=\"card-clickable\" (click)=\"SelectIntegrationCard(summary)\">\n <div class=\"card-header\">\n <div class=\"icon-circle\" [style.background-color]=\"GetIconBrandColor(summary.Integration.Integration)\">\n <i [class]=\"GetIntegrationIcon(summary.Integration.Integration, summary.Icon)\" class=\"icon-large\"></i>\n </div>\n <span [class]=\"GetStatusBadgeClass(summary)\">{{ GetStatusBadge(summary) }}</span>\n </div>\n\n <!-- Card body -->\n <div class=\"card-body\">\n <div class=\"card-name\">{{ summary.Integration.Name }}</div>\n <div class=\"card-company\">{{ summary.Integration.Company }}</div>\n <div class=\"card-meta\">\n <span class=\"meta-label\">{{ GetSourceTypeLabel(summary) }}</span>\n <span class=\"meta-separator\">&middot;</span>\n <span class=\"meta-value\">{{ GetCredentialHint(summary) }}</span>\n </div>\n <div class=\"card-sync-info\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n Syncing {{ GetEntityMapCount(summary.Integration.ID) }} entities\n </div>\n\n <!-- Inline test result -->\n @if (GetCardTestResult(summary.Integration.ID); as testResult) {\n <div class=\"card-test-result\" [class.test-success]=\"testResult.Success\" [class.test-failure]=\"!testResult.Success\">\n @if (testResult.Success) {\n <i class=\"fa-solid fa-circle-check\"></i>\n } @else {\n <i class=\"fa-solid fa-circle-xmark\"></i>\n }\n <span>{{ testResult.Message }}</span>\n </div>\n }\n </div>\n </div><!-- /card-clickable -->\n\n <!-- Delete confirmation overlay -->\n @if (IsDeleteConfirming(summary.Integration.ID)) {\n <div class=\"delete-confirm-overlay\">\n <div class=\"delete-confirm-content\">\n <i class=\"fa-solid fa-triangle-exclamation delete-warn-icon\"></i>\n <span class=\"delete-confirm-text\">Delete this integration and all its entity maps?</span>\n <div class=\"delete-confirm-actions\">\n <button kendoButton\n themeColor=\"error\"\n [disabled]=\"IsDeleting\"\n (click)=\"ConfirmDelete(summary.Integration.ID)\">\n @if (IsDeleting) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Deleting...\n } @else {\n Delete\n }\n </button>\n <button kendoButton look=\"outline\" (click)=\"CancelDelete()\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Card footer -->\n <div class=\"card-footer\">\n <button kendoButton\n look=\"outline\"\n [disabled]=\"!!TestingCardID\"\n (click)=\"TestExistingConnection(summary.Integration.ID)\">\n @if (IsTestingCard(summary.Integration.ID)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n Test\n }\n </button>\n <button kendoButton look=\"outline\" (click)=\"OnMenuAction('edit', summary)\">\n Configure\n </button>\n @if (IsConnectionActive(summary)) {\n <button kendoButton themeColor=\"primary\"\n [disabled]=\"!!SyncingIntegrationID\"\n (click)=\"RunSync(summary.Integration.ID)\">\n @if (IsSyncing(summary.Integration.ID)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Syncing...\n } @else {\n Sync Now\n }\n </button>\n }\n <button class=\"card-delete-btn\" (click)=\"OnMenuAction('delete', summary)\" title=\"Delete integration\">\n <i class=\"fa-solid fa-trash-can\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- New connection card -->\n <div class=\"connection-card new-connection-card\" (click)=\"OpenWizard()\">\n <div class=\"new-card-content\">\n <div class=\"new-card-icon\">\n <i class=\"fa-solid fa-plus\"></i>\n </div>\n <span class=\"new-card-label\">Add Integration</span>\n </div>\n </div>\n </div>\n }\n }\n\n <!-- ======================================================================\n DETAIL VIEW (entity maps for selected integration)\n ====================================================================== -->\n @if (!WizardOpen && SelectedSummary) {\n <div class=\"detail-view\">\n\n <!-- ================================================================\n ENTITY MAP EDITOR (field mapping detail for a selected map)\n ================================================================ -->\n @if (EditorEntityMap) {\n <app-visual-field-editor\n [EntityMap]=\"EditorEntityMap\"\n [CompanyIntegrationID]=\"SelectedSummary!.Integration.ID\"\n [RunViewProvider]=\"RunViewToUse\"\n (Close)=\"CloseEntityMapEditor()\">\n </app-visual-field-editor>\n\n <!-- ================================================================\n ENTITY MAPS LIST (shown when no editor map is selected)\n ================================================================ -->\n } @else {\n <!-- Detail header -->\n <div class=\"detail-header\">\n <button class=\"detail-back-btn\" (click)=\"CloseDetailView()\" title=\"Back to Integrations\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"detail-header-info\">\n <div class=\"icon-circle\" [style.background-color]=\"GetIconBrandColor(SelectedSummary.Integration.Integration)\">\n <i [class]=\"GetIntegrationIcon(SelectedSummary.Integration.Integration)\" class=\"icon-large\"></i>\n </div>\n <div class=\"detail-header-text\">\n <h2 class=\"detail-title\">{{ SelectedSummary.Integration.Name }}</h2>\n <span class=\"detail-subtitle\">\n {{ SelectedSummary.Integration.Company }}\n <span class=\"meta-separator\">&middot;</span>\n {{ GetSourceTypeLabel(SelectedSummary) }}\n <span class=\"meta-separator\">&middot;</span>\n <span [class]=\"GetStatusBadgeClass(SelectedSummary)\">{{ GetStatusBadge(SelectedSummary) }}</span>\n </span>\n </div>\n </div>\n <div class=\"detail-header-actions\">\n <button class=\"detail-edit-btn\" (click)=\"OpenEditPanel(SelectedSummary)\" title=\"Configure\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n @if (IsConnectionActive(SelectedSummary)) {\n <button kendoButton themeColor=\"primary\"\n [disabled]=\"!!SyncingIntegrationID\"\n (click)=\"RunSync(SelectedSummary.Integration.ID)\">\n @if (IsSyncing(SelectedSummary.Integration.ID)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Syncing...\n } @else {\n <i class=\"fa-solid fa-arrows-rotate\"></i> Sync Now\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Schedule section -->\n <div class=\"schedule-section\">\n <div class=\"schedule-section-header\">\n <div class=\"schedule-section-title\">\n <i class=\"fa-solid fa-calendar-check\"></i>\n <span>Sync Schedule</span>\n </div>\n </div>\n @if (ScheduledJobID) {\n <mj-scheduled-job-summary\n [ScheduledJobID]=\"ScheduledJobID\"\n (EditRequested)=\"OpenSchedulePanel()\">\n </mj-scheduled-job-summary>\n } @else {\n <div class=\"schedule-empty\">\n <span class=\"schedule-empty-text\">No sync schedule configured</span>\n <button class=\"schedule-create-btn\" (click)=\"OpenSchedulePanel()\">\n <i class=\"fa-solid fa-plus\"></i>\n Schedule Sync\n </button>\n </div>\n }\n </div>\n\n <!-- Schedule slide panel -->\n <mj-scheduled-job-slide-panel\n [IsOpen]=\"ShowScheduleSlidePanel\"\n [ScheduledJobID]=\"ScheduledJobID\"\n [JobTypeID]=\"IntegrationSyncJobTypeID\"\n [DefaultConfiguration]=\"ScheduleDefaultConfiguration\"\n [HideJobType]=\"true\"\n (Close)=\"CloseSchedulePanel()\"\n (Saved)=\"OnScheduleSaved()\"\n (Deleted)=\"OnScheduleDeleted()\">\n </mj-scheduled-job-slide-panel>\n\n <!-- Entity maps toolbar -->\n <div class=\"detail-toolbar\">\n <div class=\"detail-toolbar-left\">\n <span class=\"detail-map-count\">\n {{ DetailEntityMaps.length }} entity map{{ DetailEntityMaps.length !== 1 ? 's' : '' }}\n <span class=\"meta-separator\">&middot;</span>\n {{ DetailActiveMapCount }} active\n </span>\n </div>\n <div class=\"detail-toolbar-right\">\n <div class=\"detail-search\">\n <i class=\"fa-solid fa-filter\"></i>\n <input type=\"text\"\n placeholder=\"Filter entity maps...\"\n [value]=\"DetailSearchTerm\"\n (input)=\"OnDetailSearch($event)\" />\n </div>\n <button class=\"add-map-btn\" (click)=\"ToggleAutoMapPanel()\" [class.active]=\"ShowAutoMapPanel\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map Schema\n </button>\n <button class=\"add-map-btn\" (click)=\"ToggleAddMapPanel()\" [class.active]=\"ShowAddMapPanel\">\n <i class=\"fa-solid fa-plus\"></i> Add Map\n </button>\n </div>\n </div>\n\n <!-- Sync result banner -->\n @if (SyncResult) {\n <div class=\"sync-result-banner\" [class.sync-success]=\"SyncResult.Success\" [class.sync-failure]=\"!SyncResult.Success\">\n @if (SyncResult.Success) {\n <i class=\"fa-solid fa-circle-check\"></i>\n } @else {\n <i class=\"fa-solid fa-circle-xmark\"></i>\n }\n <span>{{ SyncResult.Message || (SyncResult.Success ? 'Sync completed successfully' : 'Sync failed') }}</span>\n </div>\n }\n\n <!-- Auto-Map Schema panel -->\n @if (ShowAutoMapPanel) {\n <div class=\"add-map-panel\">\n <div class=\"auto-map-header\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n <span>Auto-map all entities in a schema to this integration with 1:1 field mappings</span>\n </div>\n <div class=\"add-map-row\">\n <div class=\"add-map-field\">\n <label class=\"add-map-label\">Target Schema</label>\n <select class=\"add-map-select\" [(ngModel)]=\"AutoMapSelectedSchema\">\n <option [ngValue]=\"''\" disabled>Select schema...</option>\n @for (schema of AutoMapSchemas; track schema) {\n <option [value]=\"schema\">{{ schema }}</option>\n }\n </select>\n </div>\n\n <div class=\"add-map-direction-col\">\n <label class=\"add-map-label\">Direction</label>\n <div class=\"add-map-direction-btns\">\n <button [class.active]=\"AutoMapDirection === 'Pull'\" (click)=\"AutoMapDirection = 'Pull'\" title=\"Pull from source\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n <button [class.active]=\"AutoMapDirection === 'Bidirectional'\" (click)=\"AutoMapDirection = 'Bidirectional'\" title=\"Bidirectional sync\">\n <i class=\"fa-solid fa-right-left\"></i>\n </button>\n <button [class.active]=\"AutoMapDirection === 'Push'\" (click)=\"AutoMapDirection = 'Push'\" title=\"Push to source\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"add-map-actions\">\n <button class=\"add-map-save-btn\"\n [disabled]=\"!CanAutoMap\"\n (click)=\"RunAutoMap()\">\n @if (IsAutoMapping) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Mapping...\n } @else {\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n }\n </button>\n <button class=\"add-map-cancel-btn\" (click)=\"CloseAutoMapPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n\n @if (AutoMapResult) {\n <div class=\"auto-map-result\" [class.auto-map-success]=\"AutoMapResult.Errors.length === 0\"\n [class.auto-map-partial]=\"AutoMapResult.Errors.length > 0 && AutoMapResult.EntityMapsCreated > 0\"\n [class.auto-map-failure]=\"AutoMapResult.EntityMapsCreated === 0 && AutoMapResult.Errors.length > 0\">\n @if (AutoMapResult.EntityMapsCreated > 0) {\n <div class=\"auto-map-result-summary\">\n <i class=\"fa-solid fa-circle-check\"></i>\n Created {{ AutoMapResult.EntityMapsCreated }} entity map{{ AutoMapResult.EntityMapsCreated !== 1 ? 's' : '' }}\n with {{ AutoMapResult.FieldMapsCreated }} field map{{ AutoMapResult.FieldMapsCreated !== 1 ? 's' : '' }}\n </div>\n } @else if (AutoMapResult.Errors.length === 0) {\n <div class=\"auto-map-result-summary\">\n <i class=\"fa-solid fa-circle-info\"></i>\n All entities in this schema are already mapped.\n </div>\n }\n @if (AutoMapResult.Errors.length > 0) {\n <div class=\"auto-map-errors\">\n @for (err of AutoMapResult.Errors; track err) {\n <div class=\"auto-map-error\"><i class=\"fa-solid fa-triangle-exclamation\"></i> {{ err }}</div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Add Entity Map inline form -->\n @if (ShowAddMapPanel) {\n <div class=\"add-map-panel\">\n <div class=\"add-map-row\">\n <div class=\"add-map-field\">\n <label class=\"add-map-label\">Source Object</label>\n @if (IsLoadingSourceObjects) {\n <div class=\"add-map-loading\"><i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...</div>\n } @else if (AvailableSourceObjects.length === 0) {\n <div class=\"add-map-hint\">No source objects found in metadata</div>\n } @else {\n <select class=\"add-map-select\" [(ngModel)]=\"AddMapSourceObjectName\">\n <option [ngValue]=\"''\" disabled>Select source object...</option>\n @for (obj of AvailableSourceObjects; track obj.Name) {\n <option [value]=\"obj.Name\">{{ obj.Label || obj.Name }}</option>\n }\n </select>\n }\n </div>\n\n <div class=\"add-map-direction-col\">\n <label class=\"add-map-label\">Direction</label>\n <div class=\"add-map-direction-btns\">\n <button [class.active]=\"AddMapDirection === 'Pull'\" (click)=\"AddMapDirection = 'Pull'\" title=\"Pull from source\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n <button [class.active]=\"AddMapDirection === 'Bidirectional'\" (click)=\"AddMapDirection = 'Bidirectional'\" title=\"Bidirectional sync\">\n <i class=\"fa-solid fa-right-left\"></i>\n </button>\n <button [class.active]=\"AddMapDirection === 'Push'\" (click)=\"AddMapDirection = 'Push'\" title=\"Push to source\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"add-map-field add-map-entity-field\">\n <label class=\"add-map-label\">MJ Entity</label>\n <div class=\"entity-picker-row\">\n <mj-tree-dropdown\n #entityTreeDropdown\n [BranchConfig]=\"EntityBranchConfig\"\n [LeafConfig]=\"EntityLeafConfig\"\n [Value]=\"AddMapEntityIDAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search entities by schema...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"OnEntityTreeSelection($event)\">\n </mj-tree-dropdown>\n <button class=\"new-entity-btn\" (click)=\"OpenNewEntityDialog()\" title=\"Create new entity table\">\n <i class=\"fa-solid fa-plus\"></i> New\n </button>\n </div>\n </div>\n\n <div class=\"add-map-actions\">\n <button class=\"add-map-save-btn\"\n [disabled]=\"!CanSaveAddMap || IsSavingAddMap\"\n (click)=\"SaveAddMap()\">\n @if (IsSavingAddMap) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-check\"></i> Add\n }\n </button>\n <button class=\"add-map-cancel-btn\" (click)=\"CloseAddMapPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Entity maps table -->\n @if (IsDetailLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading entity maps...\"></mj-loading>\n </div>\n } @else if (DetailEntityMaps.length === 0 && !ShowAddMapPanel) {\n <div class=\"detail-empty\">\n <i class=\"fa-solid fa-cube\"></i>\n <h3>No entity maps configured</h3>\n <p>Entity maps define how external objects sync to MJ entities.</p>\n <button class=\"add-map-btn add-map-btn-lg\" (click)=\"ToggleAddMapPanel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Your First Entity Map\n </button>\n </div>\n } @else if (DetailEntityMaps.length > 0) {\n <!-- Table header -->\n <div class=\"detail-table-head\">\n <span class=\"dt-col-toggle\">Sync</span>\n <span class=\"dt-col-source\">External Object</span>\n <span class=\"dt-col-direction\"></span>\n <span class=\"dt-col-dest\">MJ Entity</span>\n <span class=\"dt-col-meta\">Config</span>\n </div>\n\n <!-- Table body -->\n <div class=\"detail-table-body\">\n @for (em of DetailFilteredMaps; track em.ID) {\n <div class=\"detail-map-row\" [class.sync-disabled]=\"!em.SyncEnabled\" (click)=\"OnEntityMapClick(em)\">\n <span class=\"dt-col-toggle\" (click)=\"$event.stopPropagation()\">\n <label class=\"toggle-switch\" [title]=\"em.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n <input type=\"checkbox\"\n [checked]=\"em.SyncEnabled\"\n (change)=\"OnToggleMapEnabled(em, $event)\" />\n <span class=\"toggle-slider\"></span>\n </label>\n </span>\n <span class=\"dt-col-source\" [title]=\"em.ExternalObjectName\">\n {{ em.ExternalObjectLabel ?? em.ExternalObjectName }}\n </span>\n <span class=\"dt-col-direction\">\n <span [class]=\"DirectionBadgeClass(em.SyncDirection)\">\n {{ DirectionText(em.SyncDirection) }}\n </span>\n </span>\n <span class=\"dt-col-dest\" [title]=\"em.Entity\">\n {{ em.Entity }}\n </span>\n <span class=\"dt-col-meta\">\n @if (em.MatchStrategy) {\n <span class=\"detail-config-badge\" title=\"Match strategy configured\">\n <i class=\"fa-solid fa-link\"></i>\n </span>\n }\n <span class=\"detail-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=\"detail-table-empty\">\n No entity maps match your filter.\n </div>\n }\n </div>\n }\n }\n\n </div>\n }\n\n <!-- ======================================================================\n WIZARD (inline, replaces card grid when open)\n ====================================================================== -->\n @if (WizardOpen) {\n <div class=\"wizard-inline\">\n <!-- Wizard header -->\n <div class=\"wizard-header\">\n <button class=\"wizard-back-btn\" (click)=\"CloseWizard()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n Back to Integrations\n </button>\n <h2 class=\"wizard-title\">New Integration</h2>\n </div>\n\n <!-- Step indicator -->\n <div class=\"step-indicator\">\n @for (step of WizardSteps; track step.Number) {\n <div class=\"step-item\" [class.step-active]=\"IsStepActive(step.Number)\" [class.step-completed]=\"IsStepCompleted(step.Number)\">\n <div class=\"step-circle\">\n @if (IsStepCompleted(step.Number)) {\n <i class=\"fa-solid fa-check\"></i>\n } @else {\n {{ step.Number }}\n }\n </div>\n <span class=\"step-label\">{{ step.Label }}</span>\n </div>\n @if (step.Number < WizardSteps.length) {\n <div class=\"step-line\" [class.step-line-active]=\"IsStepCompleted(step.Number)\"></div>\n }\n }\n </div>\n\n <!-- Step content -->\n <div class=\"wizard-body\">\n\n <!-- Step 1: Choose Integration -->\n @if (WizardStep === 1) {\n <div class=\"step-content\">\n <h3 class=\"step-title\">What system do you want to connect?</h3>\n <div class=\"search-bar\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input type=\"text\"\n class=\"search-input\"\n placeholder=\"Search integrations...\"\n [(ngModel)]=\"SearchQuery\" />\n </div>\n\n @if (FilteredIntegrations.length === 0 && AvailableIntegrations.length === 0) {\n <div class=\"no-integrations\">\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <p>No integrations configured</p>\n <span class=\"no-integrations-hint\">Configure integration definitions in the admin area first.</span>\n </div>\n } @else if (FilteredIntegrations.length === 0) {\n <div class=\"no-integrations\">\n <i class=\"fa-solid fa-search\"></i>\n <p>No matching integrations</p>\n </div>\n } @else {\n <div class=\"integration-picker-grid\">\n @for (def of FilteredIntegrations; track def.ID) {\n <div class=\"integration-picker-card\"\n [class.picker-selected]=\"IsSelectedIntegration(def)\"\n (click)=\"SelectIntegration(def)\">\n <div class=\"picker-icon-circle\" [style.background-color]=\"GetIconBrandColor(def.Name)\">\n <i [class]=\"GetIntegrationIcon(def.Name, def.Get('Icon'))\"></i>\n </div>\n <div class=\"picker-name\">{{ def.Name }}</div>\n @if (def.Description) {\n <div class=\"picker-description\">{{ def.Description }}</div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Step 2: Configure Connection -->\n @if (WizardStep === 2) {\n <div class=\"step-content\">\n <h3 class=\"step-title\">Set up your connection</h3>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"connectionName\">Connection Name</label>\n <input id=\"connectionName\"\n type=\"text\"\n class=\"form-input\"\n placeholder=\"e.g. Production HubSpot\"\n [(ngModel)]=\"ConnectionName\" />\n </div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"companySelect\">Company</label>\n @if (NeedsCompanyPicker) {\n <select id=\"companySelect\" class=\"form-input\" [(ngModel)]=\"SelectedCompanyID\">\n <option [ngValue]=\"null\" disabled>Select a company...</option>\n @for (company of Companies; track company.ID) {\n <option [value]=\"company.ID\">{{ company.Name }}</option>\n }\n </select>\n } @else if (Companies.length === 1) {\n <input type=\"text\" class=\"form-input\" [value]=\"Companies[0].Name\" disabled />\n } @else {\n <div class=\"form-hint\">No companies available. Create one in the admin area.</div>\n }\n </div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"connectionDescription\">Description <span class=\"optional-label\">(optional)</span></label>\n <textarea id=\"connectionDescription\"\n class=\"form-input form-textarea\"\n placeholder=\"Notes about this connection...\"\n [(ngModel)]=\"ConnectionDescription\"\n rows=\"3\"></textarea>\n </div>\n\n <!-- Credential section -->\n <div class=\"form-group\">\n <label class=\"form-label\">Credential</label>\n @if (SelectedCredential) {\n <div class=\"credential-selected\">\n <div class=\"credential-info\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ SelectedCredential.Name }}</span>\n </div>\n <button class=\"credential-clear\" (click)=\"ClearCredential()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n } @else {\n <div class=\"credential-actions\">\n <button kendoButton look=\"outline\" (click)=\"ShowExistingCredentials()\">\n <i class=\"fa-solid fa-key\"></i>\n Choose Existing Credential\n </button>\n <button kendoButton look=\"outline\" (click)=\"OpenCredentialDialog()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Credential\n </button>\n </div>\n }\n\n @if (IsLoadingCredentials) {\n <div class=\"credential-loading\">\n <mj-loading text=\"Loading credentials...\" size=\"small\"></mj-loading>\n </div>\n }\n\n @if (!IsLoadingCredentials && ExistingCredentials.length > 0 && !SelectedCredential) {\n <div class=\"credential-list\">\n @for (cred of ExistingCredentials; track cred.ID) {\n <div class=\"credential-list-item\" (click)=\"SelectExistingCredential(cred)\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ cred.Name }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Step 3: Test Connection -->\n @if (WizardStep === 3) {\n <div class=\"step-content step-content-centered\">\n <h3 class=\"step-title\">Let's verify everything works</h3>\n\n @if (!TestResult && !IsTesting) {\n <div class=\"test-prompt\">\n <button kendoButton\n themeColor=\"primary\"\n size=\"large\"\n (click)=\"TestNewConnection()\">\n <i class=\"fa-solid fa-vial\"></i>\n Test Connection\n </button>\n <p class=\"test-hint\">We'll verify we can reach your system and authenticate.</p>\n </div>\n }\n\n @if (IsTesting) {\n <div class=\"test-running\">\n <div class=\"test-spinner\">\n <i class=\"fa-solid fa-spinner fa-spin fa-3x\"></i>\n </div>\n <p>Testing connection...</p>\n </div>\n }\n\n @if (TestResult) {\n <div class=\"test-result\" [class.test-result-success]=\"TestResult.Success\" [class.test-result-failure]=\"!TestResult.Success\">\n <div class=\"test-result-icon\">\n @if (TestResult.Success) {\n <i class=\"fa-solid fa-circle-check\"></i>\n } @else {\n <i class=\"fa-solid fa-circle-xmark\"></i>\n }\n </div>\n <div class=\"test-result-message\">{{ TestResult.Message }}</div>\n @if (TestResult.Success && TestResult.ServerVersion) {\n <div class=\"test-result-detail\">\n Server version: {{ TestResult.ServerVersion }}\n </div>\n }\n @if (!TestResult.Success) {\n <button kendoButton look=\"outline\" (click)=\"TestNewConnection()\" class=\"test-retry-btn\">\n <i class=\"fa-solid fa-rotate-right\"></i>\n Retry\n </button>\n }\n </div>\n }\n </div>\n }\n\n </div>\n\n <!-- Wizard footer -->\n <div class=\"wizard-footer\">\n <div class=\"footer-left\"></div>\n <div class=\"footer-right\">\n @if (WizardStep > 1) {\n <button kendoButton look=\"outline\" (click)=\"PreviousStep()\">\n Back\n </button>\n }\n <button kendoButton\n themeColor=\"primary\"\n [disabled]=\"IsNextDisabled || IsSaving\"\n (click)=\"FinishWizard()\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Saving...\n } @else {\n {{ NextButtonLabel }}\n }\n </button>\n </div>\n </div>\n </div>\n }\n\n</div>\n\n<!-- Edit panel (slide-in) -->\n<div class=\"edit-panel-backdrop\"\n [class.open]=\"EditPanelOpen\"\n (click)=\"CloseEditPanel()\"></div>\n<div class=\"edit-panel\" [class.open]=\"EditPanelOpen\">\n @if (EditingSummary) {\n <!-- Header -->\n <div class=\"edit-panel-header\">\n <div class=\"edit-panel-title\">\n <div class=\"edit-icon-circle\"\n [style.background-color]=\"GetIconBrandColor(EditingSummary.Integration.Integration)\">\n <i [class]=\"GetIntegrationIcon(EditingSummary.Integration.Integration, EditingSummary.Icon)\"></i>\n </div>\n <span>Configure Integration</span>\n </div>\n <button class=\"edit-close-btn\" (click)=\"CloseEditPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n @if (IsEditLoading) {\n <div class=\"edit-panel-loading\">\n <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n </div>\n } @else {\n <!-- Edit form -->\n <div class=\"edit-panel-body\">\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Connection Name</label>\n <input type=\"text\"\n class=\"edit-form-input\"\n [(ngModel)]=\"EditName\"\n placeholder=\"Connection name...\" />\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Status</label>\n <div class=\"edit-toggle-row\">\n <label class=\"toggle-switch\">\n <input type=\"checkbox\" [(ngModel)]=\"EditIsActive\" />\n <span class=\"toggle-slider\"></span>\n </label>\n <span class=\"edit-toggle-label\" [class.active]=\"EditIsActive\">\n {{ EditIsActive ? 'Active' : 'Inactive' }}\n </span>\n </div>\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Credential</label>\n @if (EditCredential) {\n <div class=\"edit-credential-selected\">\n <div class=\"edit-credential-info\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ EditCredential.Name }}</span>\n </div>\n <button class=\"edit-credential-clear\" (click)=\"ClearEditCredential()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n } @else {\n <div class=\"edit-credential-actions\">\n <button kendoButton look=\"outline\" size=\"small\" (click)=\"OpenEditCredentialDialog()\">\n <i class=\"fa-solid fa-plus\"></i> New Credential\n </button>\n </div>\n @if (EditCredentials.length > 0) {\n <div class=\"edit-credential-list\">\n @for (cred of EditCredentials; track cred.ID) {\n <div class=\"edit-credential-item\" (click)=\"SelectEditCredential(cred)\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ cred.Name }}</span>\n </div>\n }\n </div>\n }\n }\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Integration</label>\n <div class=\"edit-readonly-field\">\n {{ EditingSummary.Integration.Integration }}\n </div>\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Company</label>\n <div class=\"edit-readonly-field\">\n {{ EditingSummary.Integration.Company }}\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"edit-panel-footer\">\n <button kendoButton\n themeColor=\"primary\"\n [disabled]=\"IsEditSaving || !EditName.trim()\"\n (click)=\"SaveEditChanges()\">\n @if (IsEditSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n } @else {\n Save Changes\n }\n </button>\n <button kendoButton look=\"outline\" (click)=\"CloseEditPanel()\">\n Cancel\n </button>\n </div>\n }\n }\n</div>\n\n<!-- Credential dialog (shared between wizard and edit panel) -->\n@if (ShowCredentialDialog) {\n <mj-credential-dialog\n [Visible]=\"true\"\n [PreselectedTypeId]=\"PreselectedCredentialTypeId\"\n (close)=\"EditPanelOpen ? OnEditCredentialDialogClose($event) : OnCredentialDialogClose($event)\">\n </mj-credential-dialog>\n}\n\n<!-- New Entity dialog -->\n@if (ShowCreateEntity) {\n <div class=\"new-entity-backdrop\" (click)=\"CloseNewEntityDialog()\"></div>\n <div class=\"new-entity-dialog\">\n <div class=\"new-entity-dialog-header\">\n <h3>Create New Entity Table</h3>\n <button class=\"new-entity-dialog-close\" (click)=\"CloseNewEntityDialog()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"new-entity-dialog-body\">\n <p class=\"new-entity-dialog-desc\">\n Generate a SQL migration to create a new database table for this integration's data.\n After running the migration and CodeGen, the new entity will appear in the entity picker.\n </p>\n\n <div class=\"new-entity-dialog-form\">\n <div class=\"new-entity-dialog-row\">\n <div class=\"new-entity-dialog-field\">\n <label class=\"new-entity-dialog-label\">Source Object</label>\n <div class=\"new-entity-dialog-value\">\n @if (AddMapSourceObjectName) {\n {{ AddMapSourceObjectName }}\n } @else {\n <span class=\"new-entity-dialog-hint\">Select a source object in the Add Map form first</span>\n }\n </div>\n </div>\n </div>\n <div class=\"new-entity-dialog-row\">\n <div class=\"new-entity-dialog-field\">\n <label class=\"new-entity-dialog-label\">Schema</label>\n <input type=\"text\"\n class=\"new-entity-dialog-input\"\n placeholder=\"e.g. hubspot\"\n [(ngModel)]=\"NewEntitySchema\" />\n </div>\n <span class=\"new-entity-dialog-dot\">.</span>\n <div class=\"new-entity-dialog-field new-entity-dialog-field-wide\">\n <label class=\"new-entity-dialog-label\">Table Name</label>\n <input type=\"text\"\n class=\"new-entity-dialog-input\"\n placeholder=\"e.g. Contact\"\n [(ngModel)]=\"NewEntityTable\" />\n </div>\n </div>\n </div>\n\n @if (DDLPreviewWarnings.length > 0) {\n <div class=\"ddl-warnings\">\n @for (warn of DDLPreviewWarnings; track warn) {\n <div class=\"ddl-warning\"><i class=\"fa-solid fa-triangle-exclamation\"></i> {{ warn }}</div>\n }\n </div>\n }\n\n @if (DDLPreview) {\n <div class=\"ddl-preview-block\">\n <div class=\"ddl-preview-header\">\n <span>SQL Preview</span>\n <button class=\"ddl-copy-btn\" (click)=\"CopyDDLToClipboard()\" title=\"Copy to clipboard\">\n @if (DDLCopied) {\n <i class=\"fa-solid fa-check\"></i> Copied\n } @else {\n <i class=\"fa-regular fa-copy\"></i> Copy\n }\n </button>\n </div>\n <pre class=\"ddl-preview-code\">{{ DDLPreview }}</pre>\n </div>\n }\n\n @if (DDLPreview) {\n <div class=\"new-entity-next-steps\">\n <h4><i class=\"fa-solid fa-list-check\"></i> Next Steps</h4>\n <ol>\n <li>Copy the SQL above and save it as a migration file</li>\n <li>Run the migration against your database</li>\n <li>Run CodeGen to register the new entity in MemberJunction</li>\n <li>Refresh the page &mdash; the new entity will appear in the entity picker</li>\n </ol>\n </div>\n }\n </div>\n <div class=\"new-entity-dialog-footer\">\n <button class=\"new-entity-preview-btn\"\n [disabled]=\"!CanGenerateSQL || IsGeneratingDDL\"\n (click)=\"PreviewDDL()\">\n @if (IsGeneratingDDL) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Generating...\n } @else {\n <i class=\"fa-solid fa-code\"></i> Generate SQL\n }\n </button>\n <button class=\"new-entity-dialog-done-btn\" (click)=\"CloseNewEntityDialog()\">\n Done\n </button>\n </div>\n </div>\n}\n", styles: ["/* ---------------------------------------------------------------------------\n Host & Container \u2014 flex chain for scrollable detail view\n --------------------------------------------------------------------------- */\n\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.connections-container {\n padding: 24px;\n max-width: 1400px;\n width: 100%;\n margin: 0 auto;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n/* When detail or editor view is active, prevent container scrolling\n so the inner .detail-table-body handles its own scroll */\n.connections-container.detail-active,\n.connections-container.editor-active {\n overflow: hidden;\n}\n\n.connections-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.header-left {\n display: flex;\n align-items: baseline;\n gap: 12px;\n}\n\n.header-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0;\n color: var(--mj-text-primary);\n}\n\n.header-count {\n font-size: 14px;\n color: var(--mj-text-disabled);\n}\n\n.add-connection-btn i {\n margin-right: 6px;\n}\n\n/* ---------------------------------------------------------------------------\n Loading & Empty States\n --------------------------------------------------------------------------- */\n\n.loading-container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 300px;\n}\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.empty-icon {\n font-size: 48px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.empty-state h3 {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 8px;\n}\n\n.empty-state p {\n font-size: 14px;\n margin: 0 0 24px;\n}\n\n/* ---------------------------------------------------------------------------\n Card Grid\n --------------------------------------------------------------------------- */\n\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n}\n\n/* ---------------------------------------------------------------------------\n Connection Card\n --------------------------------------------------------------------------- */\n\n.connection-card {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.connection-card:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n}\n\n/* Card Header */\n.card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 16px 0;\n}\n\n.icon-circle {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.icon-large {\n font-size: 22px;\n}\n\n/* Status Badge */\n.status-badge {\n font-size: 12px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: 20px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge-connected {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.status-badge-error {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.status-badge-inactive {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n}\n\n.status-badge-syncing {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n/* Card Body */\n.card-body {\n padding: 12px 16px;\n flex: 1;\n}\n\n.card-name {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 2px;\n}\n\n.card-company {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin-bottom: 10px;\n}\n\n.card-meta {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 6px;\n}\n\n.meta-separator {\n margin: 0 6px;\n}\n\n.meta-label {\n font-weight: 500;\n}\n\n.card-sync-info {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 8px;\n}\n\n.card-sync-info i {\n margin-right: 4px;\n color: var(--mj-text-disabled);\n}\n\n/* Card inline test result */\n.card-test-result {\n font-size: 12px;\n padding: 6px 10px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n}\n\n.card-test-result.test-success {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.card-test-result.test-failure {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.card-test-result span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Card Footer */\n.card-footer {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.card-footer button {\n font-size: 13px;\n}\n\n/* Card Delete Button */\n.card-delete-btn {\n margin-left: auto;\n background: none;\n border: 1px solid transparent;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 6px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n transition: all 0.15s;\n}\n\n.card-delete-btn:hover {\n background: var(--mj-status-error-bg);\n border-color: var(--mj-status-error-border);\n color: var(--mj-status-error);\n}\n\n.menu-trigger:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.card-menu-dropdown {\n position: absolute;\n right: 0;\n top: 100%;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n min-width: 160px;\n z-index: 50;\n padding: 4px;\n}\n\n.menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 12px;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n border-radius: 6px;\n transition: background 0.15s;\n text-align: left;\n}\n\n.menu-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.menu-item i {\n width: 16px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.menu-item-danger {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger i {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger:hover {\n background: var(--mj-status-error-bg);\n}\n\n/* ---------------------------------------------------------------------------\n New Connection Card\n --------------------------------------------------------------------------- */\n\n.new-connection-card {\n border: 2px dashed var(--mj-border-strong);\n background: var(--mj-bg-page);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.new-connection-card:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n box-shadow: none;\n transform: none;\n}\n\n.new-card-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n}\n\n.new-card-icon {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: var(--mj-bg-surface-active);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n color: var(--mj-text-muted);\n transition: background 0.2s, color 0.2s;\n}\n\n.new-connection-card:hover .new-card-icon {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.new-card-label {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-muted);\n}\n\n.new-connection-card:hover .new-card-label {\n color: var(--mj-brand-primary);\n}\n\n/* ---------------------------------------------------------------------------\n Wizard (inline, replaces card grid)\n --------------------------------------------------------------------------- */\n\n.wizard-inline {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-width: 720px;\n margin: 0 auto;\n}\n\n/* Wizard Header */\n.wizard-header {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 0 0 20px;\n}\n\n.wizard-back-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n padding: 6px 10px;\n border-radius: 6px;\n transition: background 0.15s, color 0.15s;\n}\n\n.wizard-back-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.wizard-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Step Indicator\n --------------------------------------------------------------------------- */\n\n.step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 32px;\n gap: 0;\n}\n\n.step-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n position: relative;\n}\n\n.step-circle {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 600;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n border: 2px solid var(--mj-border-default);\n transition: all 0.2s;\n}\n\n.step-active .step-circle {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.step-completed .step-circle {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n.step-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n}\n\n.step-active .step-label {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.step-completed .step-label {\n color: var(--mj-status-success);\n}\n\n.step-line {\n width: 48px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 8px;\n margin-bottom: 20px;\n transition: background 0.2s;\n}\n\n.step-line-active {\n background: var(--mj-status-success);\n}\n\n/* ---------------------------------------------------------------------------\n Wizard Body\n --------------------------------------------------------------------------- */\n\n.wizard-body {\n flex: 1;\n overflow-y: auto;\n padding: 0 24px 24px;\n}\n\n.step-content {\n min-height: 300px;\n}\n\n.step-content-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.step-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 20px;\n}\n\n.step-content-centered .step-title {\n margin-bottom: 32px;\n}\n\n/* Search bar */\n.search-bar {\n position: relative;\n margin-bottom: 20px;\n}\n\n.search-icon {\n position: absolute;\n left: 14px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.search-input {\n width: 100%;\n padding: 10px 14px 10px 40px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.search-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n/* No integrations */\n.no-integrations {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: var(--mj-text-disabled);\n text-align: center;\n}\n\n.no-integrations i {\n font-size: 36px;\n margin-bottom: 12px;\n}\n\n.no-integrations p {\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-muted);\n margin: 0 0 4px;\n}\n\n.no-integrations-hint {\n font-size: 13px;\n}\n\n/* Integration picker grid */\n.integration-picker-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n.integration-picker-card {\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n padding: 16px;\n cursor: pointer;\n text-align: center;\n transition: border-color 0.2s, background 0.15s;\n}\n\n.integration-picker-card:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-page);\n}\n\n.integration-picker-card.picker-selected {\n border-color: var(--mj-brand-primary);\n background: var(--mj-status-info-bg);\n}\n\n.picker-icon-circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n margin: 0 auto 10px;\n font-size: 18px;\n}\n\n.picker-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.picker-description {\n font-size: 12px;\n color: var(--mj-text-disabled);\n line-height: 1.3;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n/* ---------------------------------------------------------------------------\n Form Controls (Step 2)\n --------------------------------------------------------------------------- */\n\n.form-group {\n margin-bottom: 20px;\n}\n\n.form-label {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 6px;\n}\n\n.optional-label {\n font-weight: 400;\n color: var(--mj-text-disabled);\n}\n\n.form-input {\n width: 100%;\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.form-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input:disabled {\n background: var(--mj-bg-page);\n color: var(--mj-text-muted);\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 72px;\n}\n\n.form-hint {\n font-size: 13px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n/* Credential section */\n.credential-selected {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n border-radius: 8px;\n}\n\n.credential-info {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-status-success-text);\n font-size: 14px;\n font-weight: 500;\n}\n\n.credential-info i {\n color: var(--mj-status-success);\n}\n\n.credential-clear {\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n font-size: 14px;\n padding: 4px;\n border-radius: 4px;\n transition: color 0.15s;\n}\n\n.credential-clear:hover {\n color: var(--mj-status-error);\n}\n\n.credential-actions {\n display: flex;\n gap: 8px;\n}\n\n.credential-actions button {\n font-size: 13px;\n}\n\n.credential-loading {\n padding: 16px 0;\n}\n\n.credential-list {\n margin-top: 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.credential-list-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n cursor: pointer;\n font-size: 14px;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n}\n\n.credential-list-item:last-child {\n border-bottom: none;\n}\n\n.credential-list-item:hover {\n background: var(--mj-bg-page);\n}\n\n.credential-list-item i {\n color: var(--mj-text-disabled);\n}\n\n/* ---------------------------------------------------------------------------\n Test Connection (Step 3)\n --------------------------------------------------------------------------- */\n\n.test-prompt {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.test-hint {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n.test-running {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n color: var(--mj-brand-primary);\n}\n\n.test-spinner {\n width: 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.test-running p {\n font-size: 15px;\n font-weight: 500;\n margin: 0;\n}\n\n/* Test result */\n.test-result {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 24px;\n border-radius: 12px;\n max-width: 400px;\n}\n\n.test-result-success {\n background: var(--mj-status-success-bg);\n}\n\n.test-result-failure {\n background: var(--mj-status-error-bg);\n}\n\n.test-result-icon {\n font-size: 48px;\n animation: scaleIn 0.3s ease-out;\n}\n\n.test-result-success .test-result-icon {\n color: var(--mj-status-success);\n}\n\n.test-result-failure .test-result-icon {\n color: var(--mj-status-error);\n}\n\n@keyframes scaleIn {\n from {\n transform: scale(0.5);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.test-result-message {\n font-size: 15px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.test-result-detail {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.test-retry-btn {\n margin-top: 4px;\n}\n\n/* Toggle switch */\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 44px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-border-strong);\n border-radius: 24px;\n transition: background 0.2s;\n}\n\n.toggle-slider::before {\n content: '';\n position: absolute;\n height: 18px;\n width: 18px;\n left: 3px;\n bottom: 3px;\n background: var(--mj-bg-surface);\n border-radius: 50%;\n transition: transform 0.2s;\n}\n\n.toggle-switch input:checked + .toggle-slider {\n background: var(--mj-brand-primary);\n}\n\n.toggle-switch input:checked + .toggle-slider::before {\n transform: translateX(20px);\n}\n\n/* ---------------------------------------------------------------------------\n Wizard Footer\n --------------------------------------------------------------------------- */\n\n.wizard-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.footer-left {\n display: flex;\n align-items: center;\n}\n\n.footer-right {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* ---------------------------------------------------------------------------\n Responsive\n --------------------------------------------------------------------------- */\n\n@media (max-width: 768px) {\n .connections-container {\n padding: 16px;\n }\n\n .card-grid {\n grid-template-columns: 1fr;\n }\n\n .integration-picker-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .step-indicator {\n padding: 16px;\n overflow-x: auto;\n }\n\n .step-line {\n width: 24px;\n }\n\n .credential-actions {\n flex-direction: column;\n }\n}\n\n@media (max-width: 480px) {\n .integration-picker-grid {\n grid-template-columns: 1fr;\n }\n\n .card-footer {\n flex-wrap: wrap;\n }\n}\n\n/* ---------------------------------------------------------------------------\n Delete confirmation overlay\n --------------------------------------------------------------------------- */\n\n.delete-confirm-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: 12px;\n animation: fadeIn 150ms ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.delete-confirm-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 20px;\n text-align: center;\n}\n\n.delete-warn-icon {\n font-size: 28px;\n color: var(--mj-status-error);\n}\n\n.delete-confirm-text {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n max-width: 220px;\n}\n\n.delete-confirm-actions {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n/* ---------------------------------------------------------------------------\n Edit panel (slide-in)\n --------------------------------------------------------------------------- */\n\n.edit-panel-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.1);\n z-index: 99;\n opacity: 0;\n pointer-events: none;\n transition: opacity 300ms ease;\n}\n\n.edit-panel-backdrop.open {\n opacity: 1;\n pointer-events: auto;\n}\n\n.edit-panel {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n max-width: 100%;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);\n z-index: 100;\n transform: translateX(100%);\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.edit-panel.open {\n transform: translateX(0);\n}\n\n.edit-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.edit-panel-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.edit-icon-circle {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 14px;\n}\n\n.edit-close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 14px;\n transition: all 150ms ease;\n}\n\n.edit-close-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.edit-panel-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 20px;\n}\n\n.edit-panel-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.edit-form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.edit-form-label {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.edit-form-input {\n height: 36px;\n padding: 0 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.edit-form-input:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.edit-readonly-field {\n padding: 8px 12px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.edit-toggle-row {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.edit-toggle-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n}\n\n.edit-toggle-label.active {\n color: var(--mj-status-success);\n}\n\n.edit-credential-selected {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-page);\n}\n\n.edit-credential-info {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.edit-credential-info i {\n color: var(--mj-brand-primary);\n}\n\n.edit-credential-clear {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 150ms ease;\n}\n\n.edit-credential-clear:hover {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.edit-credential-actions {\n display: flex;\n gap: 8px;\n}\n\n.edit-credential-list {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 6px;\n max-height: 180px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n}\n\n.edit-credential-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 150ms ease;\n}\n\n.edit-credential-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.edit-credential-item i {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.edit-panel-footer {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Card clickable area\n --------------------------------------------------------------------------- */\n\n.card-clickable {\n cursor: pointer;\n}\n\n/* ---------------------------------------------------------------------------\n Detail View (entity maps for a selected integration)\n --------------------------------------------------------------------------- */\n\n.detail-view {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n\n.detail-header {\n display: flex;\n align-items: center;\n gap: 16px;\n padding-bottom: 20px;\n border-bottom: 1px solid var(--mj-border-subtle);\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.detail-header-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.detail-header-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.detail-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.detail-subtitle {\n font-size: 13px;\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.detail-header-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n/* Schedule section */\n.schedule-section {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n padding: 16px 20px;\n margin-bottom: 16px;\n}\n\n.schedule-section-header {\n margin-bottom: 12px;\n}\n\n.schedule-section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.8rem;\n font-weight: 700;\n color: #475569;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.schedule-section-title i {\n color: #0076b6;\n}\n\n.schedule-empty {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0;\n}\n\n.schedule-empty-text {\n font-size: 0.85rem;\n color: #94a3b8;\n}\n\n.schedule-create-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: linear-gradient(135deg, #0076b6 0%, #005a8c 100%);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.8rem;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.schedule-create-btn:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 118, 182, 0.4);\n}\n\n/* Detail toolbar */\n.detail-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.detail-toolbar-left {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-map-count {\n font-size: 13px;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.detail-search {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n}\n\n.detail-search i {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.detail-search input {\n border: none;\n outline: none;\n background: transparent;\n font-size: 13px;\n color: var(--mj-text-primary);\n width: 200px;\n}\n\n.detail-search input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n/* Add Map button */\n.add-map-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n}\n\n.add-map-btn.active {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n border-color: var(--mj-brand-primary);\n}\n\n.add-map-btn-lg {\n margin-top: 16px;\n padding: 10px 20px;\n font-size: 14px;\n}\n\n/* Add map inline panel */\n.add-map-panel {\n padding: 16px;\n margin-bottom: 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n animation: fadeIn 200ms ease;\n}\n\n.add-map-row {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n}\n\n.add-map-field {\n flex: 1;\n min-width: 0;\n}\n\n.add-map-label {\n display: block;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 6px;\n}\n\n.add-map-select {\n width: 100%;\n height: 34px;\n padding: 0 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.add-map-select:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.add-map-direction-col {\n flex-shrink: 0;\n}\n\n.add-map-direction-btns {\n display: flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.add-map-direction-btns button {\n padding: 7px 12px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 13px;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.add-map-direction-btns button:last-child {\n border-right: none;\n}\n\n.add-map-direction-btns button:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.add-map-direction-btns button.active {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.add-map-actions {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.add-map-save-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 16px;\n border: none;\n border-radius: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-save-btn:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.add-map-save-btn:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.add-map-cancel-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 34px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.add-map-cancel-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.add-map-loading {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n.add-map-loading i {\n color: var(--mj-brand-primary);\n margin-right: 4px;\n}\n\n.add-map-hint {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n font-style: italic;\n}\n\n/* Entity field needs more room for tree dropdown */\n.add-map-entity-field {\n flex: 2;\n min-width: 280px;\n}\n\n/* Entity picker row: tree dropdown + New button side by side */\n.entity-picker-row {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.entity-picker-row mj-tree-dropdown {\n flex: 1;\n min-width: 0;\n}\n\n.new-entity-btn {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: all 0.15s ease;\n}\n\n.new-entity-btn:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* ---------------------------------------------------------------------------\n Sync Result Banner\n --------------------------------------------------------------------------- */\n\n.sync-result-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 12px;\n animation: fadeIn 200ms ease;\n}\n\n.sync-result-banner.sync-success {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.sync-result-banner.sync-failure {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n/* ---------------------------------------------------------------------------\n Auto-Map Schema Panel\n --------------------------------------------------------------------------- */\n\n.auto-map-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-map-header i {\n color: var(--mj-brand-primary);\n}\n\n.auto-map-result {\n margin-top: 12px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n}\n\n.auto-map-result.auto-map-success {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.auto-map-result.auto-map-partial {\n background: var(--mj-status-warning-bg);\n border: 1px solid var(--mj-status-warning-border);\n color: var(--mj-status-warning-text);\n}\n\n.auto-map-result.auto-map-failure {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n.auto-map-result-summary {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}\n\n.auto-map-errors {\n margin-top: 6px;\n font-size: 12px;\n}\n\n.auto-map-error {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n}\n\n/* ---------------------------------------------------------------------------\n New Entity Dialog\n --------------------------------------------------------------------------- */\n\n.new-entity-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: fadeIn 0.15s ease;\n}\n\n.new-entity-dialog {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 640px;\n max-width: 90vw;\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n animation: fadeIn 0.2s ease;\n}\n\n.new-entity-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.new-entity-dialog-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-close:hover {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.new-entity-dialog-desc {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.new-entity-dialog-form {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.new-entity-dialog-row {\n display: flex;\n align-items: flex-end;\n gap: 8px;\n}\n\n.new-entity-dialog-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 120px;\n}\n\n.new-entity-dialog-field-wide {\n flex: 1;\n}\n\n.new-entity-dialog-label {\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.new-entity-dialog-input {\n padding: 8px 12px;\n font-size: var(--mj-text-sm);\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n transition: border-color 0.15s ease;\n}\n\n.new-entity-dialog-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);\n}\n\n.new-entity-dialog-dot {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n padding-bottom: 6px;\n user-select: none;\n}\n\n.new-entity-dialog-value {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n padding: 8px 0 4px;\n}\n\n.new-entity-dialog-hint {\n font-style: italic;\n color: var(--mj-text-disabled);\n font-weight: 400;\n}\n\n.new-entity-dialog-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.new-entity-preview-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-inverse);\n background: var(--mj-brand-primary);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: background 0.15s ease;\n}\n\n.new-entity-preview-btn:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n}\n\n.new-entity-preview-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.new-entity-dialog-done-btn {\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-done-btn:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n/* Next steps callout inside dialog */\n.new-entity-next-steps {\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 14px 16px;\n}\n\n.new-entity-next-steps h4 {\n margin: 0 0 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-brand-primary-hover);\n}\n\n.new-entity-next-steps h4 i {\n margin-right: 6px;\n}\n\n.new-entity-next-steps ol {\n margin: 0;\n padding-left: 20px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n line-height: 1.7;\n}\n\n/* DDL copy button */\n.ddl-copy-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.ddl-copy-btn:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n/* DDL Preview */\n.ddl-warnings {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.ddl-warning {\n font-size: 12px;\n color: var(--mj-status-warning);\n background: var(--mj-status-warning-subtle);\n padding: 6px 10px;\n border-radius: var(--mj-radius-sm);\n border-left: 3px solid var(--mj-status-warning);\n}\n\n.ddl-warning i {\n margin-right: 4px;\n}\n\n.ddl-preview-block {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n max-height: 300px;\n display: flex;\n flex-direction: column;\n}\n\n.ddl-preview-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.ddl-preview-code {\n margin: 0;\n padding: 12px 16px;\n font-size: 12px;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n line-height: 1.6;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n flex: 1;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Detail empty state */\n.detail-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty i {\n font-size: 36px;\n margin-bottom: 12px;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty h3 {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 6px;\n}\n\n.detail-empty p {\n font-size: 13px;\n margin: 0;\n max-width: 400px;\n}\n\n/* Detail table */\n.detail-table-head {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px 8px 0 0;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--mj-text-secondary);\n}\n\n.detail-table-body {\n border: 1px solid var(--mj-border-default);\n border-top: none;\n border-radius: 0 0 8px 8px;\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n}\n\n.detail-map-row {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n font-size: 13px;\n}\n\n.detail-map-row:last-child {\n border-bottom: none;\n}\n\n.detail-map-row:hover {\n background: var(--mj-bg-page);\n cursor: pointer;\n}\n\n.detail-map-row.sync-disabled {\n opacity: 0.5;\n}\n\n/* Column widths (shared between head and body) */\n.dt-col-toggle {\n width: 60px;\n flex-shrink: 0;\n}\n\n.dt-col-source {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.dt-col-direction {\n width: 80px;\n flex-shrink: 0;\n text-align: center;\n}\n\n.dt-col-dest {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--mj-text-primary);\n}\n\n.dt-col-meta {\n width: 80px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 6px;\n justify-content: flex-end;\n}\n\n/* Direction badge */\n.direction-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 4px;\n white-space: nowrap;\n}\n\n.direction-badge.pull {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n.direction-badge.push {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.direction-badge.bidirectional {\n background: var(--mj-status-warning-subtle);\n color: var(--mj-status-warning);\n}\n\n/* Config badges */\n.detail-config-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n font-size: 11px;\n}\n\n/* Detail back button (icon-only) */\n.detail-back-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 16px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-back-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n/* Detail edit button (icon-only) */\n.detail-edit-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 14px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-edit-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n/* Chevron hint on entity map rows */\n.map-edit-hint {\n color: var(--mj-text-disabled);\n font-size: 11px;\n transition: color 0.15s;\n}\n\n.detail-map-row:hover .map-edit-hint {\n color: var(--mj-brand-primary);\n}\n\n/* Entity map editor header */\n.ve-header-title-inline {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n}\n\n.ve-source-label {\n color: var(--mj-brand-primary);\n}\n\n.ve-direction-icon {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-dest-label {\n color: var(--mj-status-success);\n}\n\n.ve-stat-inline {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat-inline strong {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n.detail-table-empty {\n padding: 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n"] }]
2699
+ args: [{ standalone: false, selector: 'app-integration-connections', template: "<!-- Main container -->\n<div class=\"connections-container\" [class.detail-active]=\"!!SelectedSummary\"\n [class.editor-active]=\"!!EditorEntityMap\">\n\n <!-- ======================================================================\n CARD GRID VIEW (shown when no wizard and no detail selected)\n ====================================================================== -->\n @if (!WizardOpen && !SelectedSummary) {\n <!-- Header -->\n <div class=\"connections-header\">\n <div class=\"header-left\">\n <h2 class=\"header-title\">Integrations</h2>\n <span class=\"header-count\">{{ Connections.length }} integration{{ Connections.length !== 1 ? 's' : '' }}</span>\n </div>\n <button kendoButton (click)=\"OpenWizard()\" class=\"add-connection-btn\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Integration\n </button>\n </div>\n\n <!-- Loading state -->\n @if (IsLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading integrations...\"></mj-loading>\n </div>\n }\n\n <!-- Empty state -->\n @if (!IsLoading && Connections.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-plug empty-icon\"></i>\n <h3>No integrations yet</h3>\n <p>Connect your first external system to start syncing data.</p>\n <button kendoButton (click)=\"OpenWizard()\" themeColor=\"primary\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Your First Integration\n </button>\n </div>\n }\n\n <!-- Card grid -->\n @if (!IsLoading && Connections.length > 0) {\n <div class=\"card-grid\">\n @for (summary of Connections; track summary.Integration.ID) {\n <div class=\"connection-card\">\n <!-- Card header + body: clickable to open detail view -->\n <div class=\"card-clickable\" (click)=\"SelectIntegrationCard(summary)\">\n <div class=\"card-header\">\n <div class=\"icon-circle\" [style.background-color]=\"GetIconBrandColor(summary.Integration.Integration)\">\n <i [class]=\"GetIntegrationIcon(summary.Integration.Integration, summary.Icon)\" class=\"icon-large\"></i>\n </div>\n <span [class]=\"GetStatusBadgeClass(summary)\">{{ GetStatusBadge(summary) }}</span>\n </div>\n\n <!-- Card body -->\n <div class=\"card-body\">\n <div class=\"card-name\">{{ summary.Integration.Name }}</div>\n <div class=\"card-company\">{{ summary.Integration.Company }}</div>\n <div class=\"card-meta\">\n <span class=\"meta-label\">{{ GetSourceTypeLabel(summary) }}</span>\n <span class=\"meta-separator\">&middot;</span>\n <span class=\"meta-value\">{{ GetCredentialHint(summary) }}</span>\n </div>\n <div class=\"card-sync-info\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n Syncing {{ GetEntityMapCount(summary.Integration.ID) }} entities\n </div>\n\n <!-- Inline test result -->\n @if (GetCardTestResult(summary.Integration.ID); as testResult) {\n <div class=\"card-test-result\" [class.test-success]=\"testResult.Success\" [class.test-failure]=\"!testResult.Success\">\n @if (testResult.Success) {\n <i class=\"fa-solid fa-circle-check\"></i>\n } @else {\n <i class=\"fa-solid fa-circle-xmark\"></i>\n }\n <span>{{ testResult.Message }}</span>\n </div>\n }\n </div>\n </div><!-- /card-clickable -->\n\n <!-- Delete confirmation overlay -->\n @if (IsDeleteConfirming(summary.Integration.ID)) {\n <div class=\"delete-confirm-overlay\">\n <div class=\"delete-confirm-content\">\n <i class=\"fa-solid fa-triangle-exclamation delete-warn-icon\"></i>\n <span class=\"delete-confirm-text\">Delete this integration and all its entity maps?</span>\n <div class=\"delete-confirm-actions\">\n <button kendoButton\n themeColor=\"error\"\n [disabled]=\"IsDeleting\"\n (click)=\"ConfirmDelete(summary.Integration.ID)\">\n @if (IsDeleting) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Deleting...\n } @else {\n Delete\n }\n </button>\n <button kendoButton look=\"outline\" (click)=\"CancelDelete()\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Card footer -->\n <div class=\"card-footer\">\n <button kendoButton\n look=\"outline\"\n [disabled]=\"!!TestingCardID\"\n (click)=\"TestExistingConnection(summary.Integration.ID)\">\n @if (IsTestingCard(summary.Integration.ID)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n Test\n }\n </button>\n <button kendoButton look=\"outline\" (click)=\"OnMenuAction('edit', summary)\">\n Configure\n </button>\n @if (IsConnectionActive(summary)) {\n <button kendoButton themeColor=\"primary\"\n [disabled]=\"!!SyncingIntegrationID\"\n (click)=\"RunSync(summary.Integration.ID)\">\n @if (IsSyncing(summary.Integration.ID)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Syncing...\n } @else {\n Sync Now\n }\n </button>\n }\n <button class=\"card-delete-btn\" (click)=\"OnMenuAction('delete', summary)\" title=\"Delete integration\">\n <i class=\"fa-solid fa-trash-can\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- New connection card -->\n <div class=\"connection-card new-connection-card\" (click)=\"OpenWizard()\">\n <div class=\"new-card-content\">\n <div class=\"new-card-icon\">\n <i class=\"fa-solid fa-plus\"></i>\n </div>\n <span class=\"new-card-label\">Add Integration</span>\n </div>\n </div>\n </div>\n }\n }\n\n <!-- ======================================================================\n DETAIL VIEW (entity maps for selected integration)\n ====================================================================== -->\n @if (!WizardOpen && SelectedSummary) {\n <div class=\"detail-view\">\n\n <!-- ================================================================\n ENTITY MAP EDITOR (field mapping detail for a selected map)\n ================================================================ -->\n @if (EditorEntityMap) {\n <app-visual-field-editor\n [EntityMap]=\"EditorEntityMap\"\n [CompanyIntegrationID]=\"SelectedSummary!.Integration.ID\"\n [RunViewProvider]=\"RunViewToUse\"\n (Close)=\"CloseEntityMapEditor()\">\n </app-visual-field-editor>\n\n <!-- ================================================================\n ENTITY MAPS LIST (shown when no editor map is selected)\n ================================================================ -->\n } @else {\n <!-- Detail header -->\n <div class=\"detail-header\">\n <button class=\"detail-back-btn\" (click)=\"CloseDetailView()\" title=\"Back to Integrations\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"detail-header-info\">\n <div class=\"icon-circle\" [style.background-color]=\"GetIconBrandColor(SelectedSummary.Integration.Integration)\">\n <i [class]=\"GetIntegrationIcon(SelectedSummary.Integration.Integration)\" class=\"icon-large\"></i>\n </div>\n <div class=\"detail-header-text\">\n <h2 class=\"detail-title\">{{ SelectedSummary.Integration.Name }}</h2>\n <span class=\"detail-subtitle\">\n {{ SelectedSummary.Integration.Company }}\n <span class=\"meta-separator\">&middot;</span>\n {{ GetSourceTypeLabel(SelectedSummary) }}\n <span class=\"meta-separator\">&middot;</span>\n <span [class]=\"GetStatusBadgeClass(SelectedSummary)\">{{ GetStatusBadge(SelectedSummary) }}</span>\n </span>\n </div>\n </div>\n <div class=\"detail-header-actions\">\n <button class=\"detail-edit-btn\" (click)=\"OpenEditPanel(SelectedSummary)\" title=\"Configure\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n @if (IsConnectionActive(SelectedSummary)) {\n <button kendoButton themeColor=\"primary\"\n [disabled]=\"!!SyncingIntegrationID\"\n (click)=\"RunSync(SelectedSummary.Integration.ID)\">\n @if (IsSyncing(SelectedSummary.Integration.ID)) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Syncing...\n } @else {\n <i class=\"fa-solid fa-arrows-rotate\"></i> Sync Now\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Schedule section -->\n <div class=\"schedule-section\">\n <div class=\"schedule-section-header\">\n <div class=\"schedule-section-title\">\n <i class=\"fa-solid fa-calendar-check\"></i>\n <span>Sync Schedule</span>\n </div>\n </div>\n @if (ScheduledJobID) {\n <mj-scheduled-job-summary\n [ScheduledJobID]=\"ScheduledJobID\"\n (EditRequested)=\"OpenSchedulePanel()\">\n </mj-scheduled-job-summary>\n } @else {\n <div class=\"schedule-empty\">\n <span class=\"schedule-empty-text\">No sync schedule configured</span>\n <button class=\"schedule-create-btn\" (click)=\"OpenSchedulePanel()\">\n <i class=\"fa-solid fa-plus\"></i>\n Schedule Sync\n </button>\n </div>\n }\n </div>\n\n <!-- Schedule slide panel -->\n <mj-scheduled-job-slide-panel\n [IsOpen]=\"ShowScheduleSlidePanel\"\n [ScheduledJobID]=\"ScheduledJobID\"\n [JobTypeID]=\"IntegrationSyncJobTypeID\"\n [DefaultConfiguration]=\"ScheduleDefaultConfiguration\"\n [HideJobType]=\"true\"\n (Close)=\"CloseSchedulePanel()\"\n (Saved)=\"OnScheduleSaved()\"\n (Deleted)=\"OnScheduleDeleted()\">\n </mj-scheduled-job-slide-panel>\n\n <!-- Entity maps toolbar -->\n <div class=\"detail-toolbar\">\n <div class=\"detail-toolbar-left\">\n <span class=\"detail-map-count\">\n {{ DetailEntityMaps.length }} entity map{{ DetailEntityMaps.length !== 1 ? 's' : '' }}\n <span class=\"meta-separator\">&middot;</span>\n {{ DetailActiveMapCount }} active\n </span>\n </div>\n <div class=\"detail-toolbar-right\">\n <div class=\"detail-search\">\n <i class=\"fa-solid fa-filter\"></i>\n <input type=\"text\"\n placeholder=\"Filter entity maps...\"\n [value]=\"DetailSearchTerm\"\n (input)=\"OnDetailSearch($event)\" />\n </div>\n <button class=\"add-map-btn\" (click)=\"ToggleAutoMapPanel()\" [class.active]=\"ShowAutoMapPanel\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map Schema\n </button>\n <button class=\"add-map-btn\" (click)=\"ToggleAddMapPanel()\" [class.active]=\"ShowAddMapPanel\">\n <i class=\"fa-solid fa-plus\"></i> Add Map\n </button>\n </div>\n </div>\n\n <!-- Sync result banner -->\n @if (SyncResult) {\n <div class=\"sync-result-banner\" [class.sync-success]=\"SyncResult.Success\" [class.sync-failure]=\"!SyncResult.Success\">\n @if (SyncResult.Success) {\n <i class=\"fa-solid fa-circle-check\"></i>\n } @else {\n <i class=\"fa-solid fa-circle-xmark\"></i>\n }\n <span>{{ SyncResult.Message || (SyncResult.Success ? 'Sync completed successfully' : 'Sync failed') }}</span>\n </div>\n }\n\n <!-- Auto-Map Schema panel -->\n @if (ShowAutoMapPanel) {\n <div class=\"add-map-panel\">\n <div class=\"auto-map-header\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n <span>Auto-map all entities in a schema to this integration with 1:1 field mappings</span>\n </div>\n <div class=\"add-map-row\">\n <div class=\"add-map-field\">\n <label class=\"add-map-label\">Target Schema</label>\n <select class=\"add-map-select\" [(ngModel)]=\"AutoMapSelectedSchema\">\n <option [ngValue]=\"''\" disabled>Select schema...</option>\n @for (schema of AutoMapSchemas; track schema) {\n <option [value]=\"schema\">{{ schema }}</option>\n }\n </select>\n </div>\n\n <div class=\"add-map-direction-col\">\n <label class=\"add-map-label\">Direction</label>\n <div class=\"add-map-direction-btns\">\n <button [class.active]=\"AutoMapDirection === 'Pull'\" (click)=\"AutoMapDirection = 'Pull'\" title=\"Pull from source\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n <button [class.active]=\"AutoMapDirection === 'Bidirectional'\" (click)=\"AutoMapDirection = 'Bidirectional'\" title=\"Bidirectional sync\">\n <i class=\"fa-solid fa-right-left\"></i>\n </button>\n <button [class.active]=\"AutoMapDirection === 'Push'\" (click)=\"AutoMapDirection = 'Push'\" title=\"Push to source\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"add-map-actions\">\n <button class=\"add-map-save-btn\"\n [disabled]=\"!CanAutoMap\"\n (click)=\"RunAutoMap()\">\n @if (IsAutoMapping) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Mapping...\n } @else {\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n }\n </button>\n <button class=\"add-map-cancel-btn\" (click)=\"CloseAutoMapPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n\n @if (AutoMapResult) {\n <div class=\"auto-map-result\" [class.auto-map-success]=\"AutoMapResult.Errors.length === 0\"\n [class.auto-map-partial]=\"AutoMapResult.Errors.length > 0 && AutoMapResult.EntityMapsCreated > 0\"\n [class.auto-map-failure]=\"AutoMapResult.EntityMapsCreated === 0 && AutoMapResult.Errors.length > 0\">\n @if (AutoMapResult.EntityMapsCreated > 0) {\n <div class=\"auto-map-result-summary\">\n <i class=\"fa-solid fa-circle-check\"></i>\n Created {{ AutoMapResult.EntityMapsCreated }} entity map{{ AutoMapResult.EntityMapsCreated !== 1 ? 's' : '' }}\n with {{ AutoMapResult.FieldMapsCreated }} field map{{ AutoMapResult.FieldMapsCreated !== 1 ? 's' : '' }}\n </div>\n } @else if (AutoMapResult.Errors.length === 0) {\n <div class=\"auto-map-result-summary\">\n <i class=\"fa-solid fa-circle-info\"></i>\n All entities in this schema are already mapped.\n </div>\n }\n @if (AutoMapResult.Errors.length > 0) {\n <div class=\"auto-map-errors\">\n @for (err of AutoMapResult.Errors; track err) {\n <div class=\"auto-map-error\"><i class=\"fa-solid fa-triangle-exclamation\"></i> {{ err }}</div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Add Entity Map inline form -->\n @if (ShowAddMapPanel) {\n <div class=\"add-map-panel\">\n <div class=\"add-map-row\">\n <div class=\"add-map-field\">\n <label class=\"add-map-label\">Source Object</label>\n @if (IsLoadingSourceObjects) {\n <div class=\"add-map-loading\"><i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...</div>\n } @else if (AvailableSourceObjects.length === 0) {\n <div class=\"add-map-hint\">No source objects found in metadata</div>\n } @else {\n <select class=\"add-map-select\" [(ngModel)]=\"AddMapSourceObjectName\">\n <option [ngValue]=\"''\" disabled>Select source object...</option>\n @for (obj of AvailableSourceObjects; track obj.Name) {\n <option [value]=\"obj.Name\">{{ obj.Label || obj.Name }}</option>\n }\n </select>\n }\n </div>\n\n <div class=\"add-map-direction-col\">\n <label class=\"add-map-label\">Direction</label>\n <div class=\"add-map-direction-btns\">\n <button [class.active]=\"AddMapDirection === 'Pull'\" (click)=\"AddMapDirection = 'Pull'\" title=\"Pull from source\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n <button [class.active]=\"AddMapDirection === 'Bidirectional'\" (click)=\"AddMapDirection = 'Bidirectional'\" title=\"Bidirectional sync\">\n <i class=\"fa-solid fa-right-left\"></i>\n </button>\n <button [class.active]=\"AddMapDirection === 'Push'\" (click)=\"AddMapDirection = 'Push'\" title=\"Push to source\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"add-map-field add-map-entity-field\">\n <label class=\"add-map-label\">MJ Entity</label>\n <div class=\"entity-picker-row\">\n <mj-tree-dropdown\n #entityTreeDropdown\n [BranchConfig]=\"EntityBranchConfig\"\n [LeafConfig]=\"EntityLeafConfig\"\n [Value]=\"AddMapEntityIDAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search entities by schema...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"OnEntityTreeSelection($event)\">\n </mj-tree-dropdown>\n <button class=\"new-entity-btn\" (click)=\"OpenNewEntityDialog()\" title=\"Create new entity table\">\n <i class=\"fa-solid fa-plus\"></i> New\n </button>\n </div>\n </div>\n\n <div class=\"add-map-actions\">\n <button class=\"add-map-save-btn\"\n [disabled]=\"!CanSaveAddMap || IsSavingAddMap\"\n (click)=\"SaveAddMap()\">\n @if (IsSavingAddMap) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-check\"></i> Add\n }\n </button>\n <button class=\"add-map-cancel-btn\" (click)=\"CloseAddMapPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Entity maps table -->\n @if (IsDetailLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading entity maps...\"></mj-loading>\n </div>\n } @else if (DetailEntityMaps.length === 0 && !ShowAddMapPanel) {\n <div class=\"detail-empty\">\n <i class=\"fa-solid fa-cube\"></i>\n <h3>No entity maps configured</h3>\n <p>Entity maps define how external objects sync to MJ entities.</p>\n <button class=\"add-map-btn add-map-btn-lg\" (click)=\"ToggleAddMapPanel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Your First Entity Map\n </button>\n </div>\n } @else if (DetailEntityMaps.length > 0) {\n <!-- Table header -->\n <div class=\"detail-table-head\">\n <span class=\"dt-col-toggle\">Sync</span>\n <span class=\"dt-col-source\">External Object</span>\n <span class=\"dt-col-direction\"></span>\n <span class=\"dt-col-dest\">MJ Entity</span>\n <span class=\"dt-col-meta\">Config</span>\n </div>\n\n <!-- Table body -->\n <div class=\"detail-table-body\">\n @for (em of DetailFilteredMaps; track em.ID) {\n <div class=\"detail-map-row\" [class.sync-disabled]=\"!em.SyncEnabled\" (click)=\"OnEntityMapClick(em)\">\n <span class=\"dt-col-toggle\" (click)=\"$event.stopPropagation()\">\n <label class=\"toggle-switch\" [title]=\"em.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n <input type=\"checkbox\"\n [checked]=\"em.SyncEnabled\"\n (change)=\"OnToggleMapEnabled(em, $event)\" />\n <span class=\"toggle-slider\"></span>\n </label>\n </span>\n <span class=\"dt-col-source\" [title]=\"em.ExternalObjectName\">\n {{ em.ExternalObjectLabel ?? em.ExternalObjectName }}\n </span>\n <span class=\"dt-col-direction\">\n <span [class]=\"DirectionBadgeClass(em.SyncDirection)\">\n {{ DirectionText(em.SyncDirection) }}\n </span>\n </span>\n <span class=\"dt-col-dest\" [title]=\"em.Entity\">\n {{ em.Entity }}\n </span>\n <span class=\"dt-col-meta\">\n @if (em.MatchStrategy) {\n <span class=\"detail-config-badge\" title=\"Match strategy configured\">\n <i class=\"fa-solid fa-link\"></i>\n </span>\n }\n <span class=\"detail-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=\"detail-table-empty\">\n No entity maps match your filter.\n </div>\n }\n </div>\n }\n }\n\n </div>\n }\n\n <!-- ======================================================================\n WIZARD (inline, replaces card grid when open)\n ====================================================================== -->\n @if (WizardOpen) {\n <div class=\"wizard-inline\">\n <!-- Wizard header -->\n <div class=\"wizard-header\">\n <button class=\"wizard-back-btn\" (click)=\"CloseWizard()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n Back to Integrations\n </button>\n <h2 class=\"wizard-title\">New Integration</h2>\n </div>\n\n <!-- Step indicator -->\n <div class=\"step-indicator\">\n @for (step of WizardSteps; track step.Number) {\n <div class=\"step-item\" [class.step-active]=\"IsStepActive(step.Number)\" [class.step-completed]=\"IsStepCompleted(step.Number)\">\n <div class=\"step-circle\">\n @if (IsStepCompleted(step.Number)) {\n <i class=\"fa-solid fa-check\"></i>\n } @else {\n {{ step.Number }}\n }\n </div>\n <span class=\"step-label\">{{ step.Label }}</span>\n </div>\n @if (step.Number < WizardSteps.length) {\n <div class=\"step-line\" [class.step-line-active]=\"IsStepCompleted(step.Number)\"></div>\n }\n }\n </div>\n\n <!-- Step content -->\n <div class=\"wizard-body\">\n\n <!-- Step 1: Choose Integration -->\n @if (WizardStep === 1) {\n <div class=\"step-content\">\n <h3 class=\"step-title\">What system do you want to connect?</h3>\n <div class=\"search-bar\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input type=\"text\"\n class=\"search-input\"\n placeholder=\"Search integrations...\"\n [(ngModel)]=\"SearchQuery\" />\n </div>\n\n @if (FilteredIntegrations.length === 0 && AvailableIntegrations.length === 0) {\n <div class=\"no-integrations\">\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <p>No integrations configured</p>\n <span class=\"no-integrations-hint\">Configure integration definitions in the admin area first.</span>\n </div>\n } @else if (FilteredIntegrations.length === 0) {\n <div class=\"no-integrations\">\n <i class=\"fa-solid fa-search\"></i>\n <p>No matching integrations</p>\n </div>\n } @else {\n <div class=\"integration-picker-grid\">\n @for (def of FilteredIntegrations; track def.ID) {\n <div class=\"integration-picker-card\"\n [class.picker-selected]=\"IsSelectedIntegration(def)\"\n (click)=\"SelectIntegration(def)\">\n <div class=\"picker-icon-circle\" [style.background-color]=\"GetIconBrandColor(def.Name)\">\n <i [class]=\"GetIntegrationIcon(def.Name, def.Get('Icon'))\"></i>\n </div>\n <div class=\"picker-name\">{{ def.Name }}</div>\n @if (def.Description) {\n <div class=\"picker-description\">{{ def.Description }}</div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Step 2: Configure Connection -->\n @if (WizardStep === 2) {\n <div class=\"step-content\">\n <h3 class=\"step-title\">Set up your connection</h3>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"connectionName\">Connection Name</label>\n <input id=\"connectionName\"\n type=\"text\"\n class=\"form-input\"\n placeholder=\"e.g. Production HubSpot\"\n [(ngModel)]=\"ConnectionName\" />\n </div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"companySelect\">Company</label>\n @if (NeedsCompanyPicker) {\n <select id=\"companySelect\" class=\"form-input\" [(ngModel)]=\"SelectedCompanyID\">\n <option [ngValue]=\"null\" disabled>Select a company...</option>\n @for (company of Companies; track company.ID) {\n <option [value]=\"company.ID\">{{ company.Name }}</option>\n }\n </select>\n } @else if (Companies.length === 1) {\n <input type=\"text\" class=\"form-input\" [value]=\"Companies[0].Name\" disabled />\n } @else {\n <div class=\"form-hint\">No companies available. Create one in the admin area.</div>\n }\n </div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"connectionDescription\">Description <span class=\"optional-label\">(optional)</span></label>\n <textarea id=\"connectionDescription\"\n class=\"form-input form-textarea\"\n placeholder=\"Notes about this connection...\"\n [(ngModel)]=\"ConnectionDescription\"\n rows=\"3\"></textarea>\n </div>\n\n <!-- Credential section -->\n <div class=\"form-group\">\n <label class=\"form-label\">Credential</label>\n @if (SelectedCredential) {\n <div class=\"credential-selected\">\n <div class=\"credential-info\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ SelectedCredential.Name }}</span>\n </div>\n <button class=\"credential-clear\" (click)=\"ClearCredential()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n } @else {\n <div class=\"credential-actions\">\n <button kendoButton look=\"outline\" (click)=\"ShowExistingCredentials()\">\n <i class=\"fa-solid fa-key\"></i>\n Choose Existing Credential\n </button>\n <button kendoButton look=\"outline\" (click)=\"OpenCredentialDialog()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create New Credential\n </button>\n </div>\n }\n\n @if (IsLoadingCredentials) {\n <div class=\"credential-loading\">\n <mj-loading text=\"Loading credentials...\" size=\"small\"></mj-loading>\n </div>\n }\n\n @if (!IsLoadingCredentials && ExistingCredentials.length > 0 && !SelectedCredential) {\n <div class=\"credential-list\">\n @for (cred of ExistingCredentials; track cred.ID) {\n <div class=\"credential-list-item\" (click)=\"SelectExistingCredential(cred)\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ cred.Name }}</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Step 3: Test Connection -->\n @if (WizardStep === 3) {\n <div class=\"step-content step-content-centered\">\n <h3 class=\"step-title\">Let's verify everything works</h3>\n\n @if (!TestResult && !IsTesting) {\n <div class=\"test-prompt\">\n <button kendoButton\n themeColor=\"primary\"\n size=\"large\"\n (click)=\"TestNewConnection()\">\n <i class=\"fa-solid fa-vial\"></i>\n Test Connection\n </button>\n <p class=\"test-hint\">We'll verify we can reach your system and authenticate.</p>\n </div>\n }\n\n @if (IsTesting) {\n <div class=\"test-running\">\n <div class=\"test-spinner\">\n <i class=\"fa-solid fa-spinner fa-spin fa-3x\"></i>\n </div>\n <p>Testing connection...</p>\n </div>\n }\n\n @if (TestResult) {\n <div class=\"test-result\" [class.test-result-success]=\"TestResult.Success\" [class.test-result-failure]=\"!TestResult.Success\">\n <div class=\"test-result-icon\">\n @if (TestResult.Success) {\n <i class=\"fa-solid fa-circle-check\"></i>\n } @else {\n <i class=\"fa-solid fa-circle-xmark\"></i>\n }\n </div>\n <div class=\"test-result-message\">{{ TestResult.Message }}</div>\n @if (TestResult.Success && TestResult.ServerVersion) {\n <div class=\"test-result-detail\">\n Server version: {{ TestResult.ServerVersion }}\n </div>\n }\n @if (!TestResult.Success) {\n <button kendoButton look=\"outline\" (click)=\"TestNewConnection()\" class=\"test-retry-btn\">\n <i class=\"fa-solid fa-rotate-right\"></i>\n Retry\n </button>\n }\n </div>\n }\n </div>\n }\n\n </div>\n\n <!-- Wizard footer -->\n <div class=\"wizard-footer\">\n <div class=\"footer-left\"></div>\n <div class=\"footer-right\">\n @if (WizardStep > 1) {\n <button kendoButton look=\"outline\" (click)=\"PreviousStep()\">\n Back\n </button>\n }\n <button kendoButton\n themeColor=\"primary\"\n [disabled]=\"IsNextDisabled || IsSaving\"\n (click)=\"FinishWizard()\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Saving...\n } @else {\n {{ NextButtonLabel }}\n }\n </button>\n </div>\n </div>\n </div>\n }\n\n</div>\n\n<!-- Edit panel (slide-in) -->\n<div class=\"edit-panel-backdrop\"\n [class.open]=\"EditPanelOpen\"\n (click)=\"CloseEditPanel()\"></div>\n<div class=\"edit-panel\" [class.open]=\"EditPanelOpen\">\n @if (EditingSummary) {\n <!-- Header -->\n <div class=\"edit-panel-header\">\n <div class=\"edit-panel-title\">\n <div class=\"edit-icon-circle\"\n [style.background-color]=\"GetIconBrandColor(EditingSummary.Integration.Integration)\">\n <i [class]=\"GetIntegrationIcon(EditingSummary.Integration.Integration, EditingSummary.Icon)\"></i>\n </div>\n <span>Configure Integration</span>\n </div>\n <button class=\"edit-close-btn\" (click)=\"CloseEditPanel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n @if (IsEditLoading) {\n <div class=\"edit-panel-loading\">\n <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n </div>\n } @else {\n <!-- Edit form -->\n <div class=\"edit-panel-body\">\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Connection Name</label>\n <input type=\"text\"\n class=\"edit-form-input\"\n [(ngModel)]=\"EditName\"\n placeholder=\"Connection name...\" />\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Status</label>\n <div class=\"edit-toggle-row\">\n <label class=\"toggle-switch\">\n <input type=\"checkbox\" [(ngModel)]=\"EditIsActive\" />\n <span class=\"toggle-slider\"></span>\n </label>\n <span class=\"edit-toggle-label\" [class.active]=\"EditIsActive\">\n {{ EditIsActive ? 'Active' : 'Inactive' }}\n </span>\n </div>\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Credential</label>\n @if (EditCredential) {\n <div class=\"edit-credential-selected\">\n <div class=\"edit-credential-info\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ EditCredential.Name }}</span>\n </div>\n <button class=\"edit-credential-clear\" (click)=\"ClearEditCredential()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n } @else {\n <div class=\"edit-credential-actions\">\n <button kendoButton look=\"outline\" size=\"small\" (click)=\"OpenEditCredentialDialog()\">\n <i class=\"fa-solid fa-plus\"></i> New Credential\n </button>\n </div>\n @if (EditCredentials.length > 0) {\n <div class=\"edit-credential-list\">\n @for (cred of EditCredentials; track cred.ID) {\n <div class=\"edit-credential-item\" (click)=\"SelectEditCredential(cred)\">\n <i class=\"fa-solid fa-key\"></i>\n <span>{{ cred.Name }}</span>\n </div>\n }\n </div>\n }\n }\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Integration</label>\n <div class=\"edit-readonly-field\">\n {{ EditingSummary.Integration.Integration }}\n </div>\n </div>\n\n <div class=\"edit-form-group\">\n <label class=\"edit-form-label\">Company</label>\n <div class=\"edit-readonly-field\">\n {{ EditingSummary.Integration.Company }}\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"edit-panel-footer\">\n <button kendoButton\n themeColor=\"primary\"\n [disabled]=\"IsEditSaving || !EditName.trim()\"\n (click)=\"SaveEditChanges()\">\n @if (IsEditSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n } @else {\n Save Changes\n }\n </button>\n <button kendoButton look=\"outline\" (click)=\"CloseEditPanel()\">\n Cancel\n </button>\n </div>\n }\n }\n</div>\n\n<!-- Credential dialog (shared between wizard and edit panel) -->\n@if (ShowCredentialDialog) {\n <mj-credential-dialog\n [Visible]=\"true\"\n [PreselectedTypeId]=\"PreselectedCredentialTypeId\"\n (close)=\"EditPanelOpen ? OnEditCredentialDialogClose($event) : OnCredentialDialogClose($event)\">\n </mj-credential-dialog>\n}\n\n<!-- New Entity dialog -->\n@if (ShowCreateEntity) {\n <div class=\"new-entity-backdrop\" (click)=\"CloseNewEntityDialog()\"></div>\n <div class=\"new-entity-dialog\">\n <div class=\"new-entity-dialog-header\">\n <h3>Create New Entity Table</h3>\n <button class=\"new-entity-dialog-close\" (click)=\"CloseNewEntityDialog()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"new-entity-dialog-body\">\n <p class=\"new-entity-dialog-desc\">\n Generate a SQL migration to create a new database table for this integration's data.\n After running the migration and CodeGen, the new entity will appear in the entity picker.\n </p>\n\n <div class=\"new-entity-dialog-form\">\n <div class=\"new-entity-dialog-row\">\n <div class=\"new-entity-dialog-field\">\n <label class=\"new-entity-dialog-label\">Source Object</label>\n <div class=\"new-entity-dialog-value\">\n @if (AddMapSourceObjectName) {\n {{ AddMapSourceObjectName }}\n } @else {\n <span class=\"new-entity-dialog-hint\">Select a source object in the Add Map form first</span>\n }\n </div>\n </div>\n </div>\n <div class=\"new-entity-dialog-row\">\n <div class=\"new-entity-dialog-field\">\n <label class=\"new-entity-dialog-label\">Schema</label>\n <input type=\"text\"\n class=\"new-entity-dialog-input\"\n placeholder=\"e.g. hubspot\"\n [(ngModel)]=\"NewEntitySchema\" />\n </div>\n <span class=\"new-entity-dialog-dot\">.</span>\n <div class=\"new-entity-dialog-field new-entity-dialog-field-wide\">\n <label class=\"new-entity-dialog-label\">Table Name</label>\n <input type=\"text\"\n class=\"new-entity-dialog-input\"\n placeholder=\"e.g. Contact\"\n [(ngModel)]=\"NewEntityTable\" />\n </div>\n </div>\n </div>\n\n @if (DDLPreviewWarnings.length > 0) {\n <div class=\"ddl-warnings\">\n @for (warn of DDLPreviewWarnings; track warn) {\n <div class=\"ddl-warning\"><i class=\"fa-solid fa-triangle-exclamation\"></i> {{ warn }}</div>\n }\n </div>\n }\n\n @if (DDLPreview) {\n <div class=\"ddl-preview-block\">\n <div class=\"ddl-preview-header\">\n <span>SQL Preview</span>\n <button class=\"ddl-copy-btn\" (click)=\"CopyDDLToClipboard()\" title=\"Copy to clipboard\">\n @if (DDLCopied) {\n <i class=\"fa-solid fa-check\"></i> Copied\n } @else {\n <i class=\"fa-regular fa-copy\"></i> Copy\n }\n </button>\n </div>\n <pre class=\"ddl-preview-code\">{{ DDLPreview }}</pre>\n </div>\n }\n\n @if (DDLPreview) {\n <div class=\"new-entity-next-steps\">\n <h4><i class=\"fa-solid fa-list-check\"></i> Next Steps</h4>\n <ol>\n <li>Copy the SQL above and save it as a migration file</li>\n <li>Run the migration against your database</li>\n <li>Run CodeGen to register the new entity in MemberJunction</li>\n <li>Refresh the page &mdash; the new entity will appear in the entity picker</li>\n </ol>\n </div>\n }\n </div>\n <div class=\"new-entity-dialog-footer\">\n <button class=\"new-entity-preview-btn\"\n [disabled]=\"!CanGenerateSQL || IsGeneratingDDL\"\n (click)=\"PreviewDDL()\">\n @if (IsGeneratingDDL) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Generating...\n } @else {\n <i class=\"fa-solid fa-code\"></i> Generate SQL\n }\n </button>\n <button class=\"new-entity-dialog-done-btn\" (click)=\"CloseNewEntityDialog()\">\n Done\n </button>\n </div>\n </div>\n}\n", styles: ["/* ---------------------------------------------------------------------------\n Host & Container \u2014 flex chain for scrollable detail view\n --------------------------------------------------------------------------- */\n\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.connections-container {\n padding: 24px;\n max-width: 1400px;\n width: 100%;\n margin: 0 auto;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n/* When detail or editor view is active, prevent container scrolling\n so the inner .detail-table-body handles its own scroll */\n.connections-container.detail-active,\n.connections-container.editor-active {\n overflow: hidden;\n}\n\n.connections-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.header-left {\n display: flex;\n align-items: baseline;\n gap: 12px;\n}\n\n.header-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0;\n color: var(--mj-text-primary);\n}\n\n.header-count {\n font-size: 14px;\n color: var(--mj-text-disabled);\n}\n\n.add-connection-btn i {\n margin-right: 6px;\n}\n\n/* ---------------------------------------------------------------------------\n Loading & Empty States\n --------------------------------------------------------------------------- */\n\n.loading-container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 300px;\n}\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.empty-icon {\n font-size: 48px;\n color: var(--mj-text-disabled);\n margin-bottom: 16px;\n}\n\n.empty-state h3 {\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 8px;\n}\n\n.empty-state p {\n font-size: 14px;\n margin: 0 0 24px;\n}\n\n/* ---------------------------------------------------------------------------\n Card Grid\n --------------------------------------------------------------------------- */\n\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n}\n\n/* ---------------------------------------------------------------------------\n Connection Card\n --------------------------------------------------------------------------- */\n\n.connection-card {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.connection-card:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n}\n\n/* Card Header */\n.card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 16px 0;\n}\n\n.icon-circle {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.icon-large {\n font-size: 22px;\n}\n\n/* Status Badge */\n.status-badge {\n font-size: 12px;\n font-weight: 600;\n padding: 4px 10px;\n border-radius: 20px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.status-badge-connected {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.status-badge-error {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.status-badge-inactive {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-muted);\n}\n\n.status-badge-syncing {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n/* Card Body */\n.card-body {\n padding: 12px 16px;\n flex: 1;\n}\n\n.card-name {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 2px;\n}\n\n.card-company {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin-bottom: 10px;\n}\n\n.card-meta {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 6px;\n}\n\n.meta-separator {\n margin: 0 6px;\n}\n\n.meta-label {\n font-weight: 500;\n}\n\n.card-sync-info {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-bottom: 8px;\n}\n\n.card-sync-info i {\n margin-right: 4px;\n color: var(--mj-text-disabled);\n}\n\n/* Card inline test result */\n.card-test-result {\n font-size: 12px;\n padding: 6px 10px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n}\n\n.card-test-result.test-success {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.card-test-result.test-failure {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.card-test-result span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Card Footer */\n.card-footer {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.card-footer button {\n font-size: 13px;\n}\n\n/* Card Delete Button */\n.card-delete-btn {\n margin-left: auto;\n background: none;\n border: 1px solid transparent;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 6px;\n color: var(--mj-text-disabled);\n font-size: 14px;\n transition: all 0.15s;\n}\n\n.card-delete-btn:hover {\n background: var(--mj-status-error-bg);\n border-color: var(--mj-status-error-border);\n color: var(--mj-status-error);\n}\n\n.menu-trigger:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.card-menu-dropdown {\n position: absolute;\n right: 0;\n top: 100%;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n min-width: 160px;\n z-index: 50;\n padding: 4px;\n}\n\n.menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 12px;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n border-radius: 6px;\n transition: background 0.15s;\n text-align: left;\n}\n\n.menu-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.menu-item i {\n width: 16px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.menu-item-danger {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger i {\n color: var(--mj-status-error);\n}\n\n.menu-item-danger:hover {\n background: var(--mj-status-error-bg);\n}\n\n/* ---------------------------------------------------------------------------\n New Connection Card\n --------------------------------------------------------------------------- */\n\n.new-connection-card {\n border: 2px dashed var(--mj-border-strong);\n background: var(--mj-bg-page);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.new-connection-card:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n box-shadow: none;\n transform: none;\n}\n\n.new-card-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n}\n\n.new-card-icon {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: var(--mj-bg-surface-active);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n color: var(--mj-text-muted);\n transition: background 0.2s, color 0.2s;\n}\n\n.new-connection-card:hover .new-card-icon {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.new-card-label {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-muted);\n}\n\n.new-connection-card:hover .new-card-label {\n color: var(--mj-brand-primary);\n}\n\n/* ---------------------------------------------------------------------------\n Wizard (inline, replaces card grid)\n --------------------------------------------------------------------------- */\n\n.wizard-inline {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-width: 720px;\n margin: 0 auto;\n}\n\n/* Wizard Header */\n.wizard-header {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 0 0 20px;\n}\n\n.wizard-back-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n padding: 6px 10px;\n border-radius: 6px;\n transition: background 0.15s, color 0.15s;\n}\n\n.wizard-back-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.wizard-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Step Indicator\n --------------------------------------------------------------------------- */\n\n.step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 32px;\n gap: 0;\n}\n\n.step-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n position: relative;\n}\n\n.step-circle {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 600;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n border: 2px solid var(--mj-border-default);\n transition: all 0.2s;\n}\n\n.step-active .step-circle {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.step-completed .step-circle {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-success);\n}\n\n.step-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n}\n\n.step-active .step-label {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.step-completed .step-label {\n color: var(--mj-status-success);\n}\n\n.step-line {\n width: 48px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 8px;\n margin-bottom: 20px;\n transition: background 0.2s;\n}\n\n.step-line-active {\n background: var(--mj-status-success);\n}\n\n/* ---------------------------------------------------------------------------\n Wizard Body\n --------------------------------------------------------------------------- */\n\n.wizard-body {\n flex: 1;\n overflow-y: auto;\n padding: 0 24px 24px;\n}\n\n.step-content {\n min-height: 300px;\n}\n\n.step-content-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.step-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 20px;\n}\n\n.step-content-centered .step-title {\n margin-bottom: 32px;\n}\n\n/* Search bar */\n.search-bar {\n position: relative;\n margin-bottom: 20px;\n}\n\n.search-icon {\n position: absolute;\n left: 14px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.search-input {\n width: 100%;\n padding: 10px 14px 10px 40px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.search-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n/* No integrations */\n.no-integrations {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: var(--mj-text-disabled);\n text-align: center;\n}\n\n.no-integrations i {\n font-size: 36px;\n margin-bottom: 12px;\n}\n\n.no-integrations p {\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-muted);\n margin: 0 0 4px;\n}\n\n.no-integrations-hint {\n font-size: 13px;\n}\n\n/* Integration picker grid */\n.integration-picker-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n.integration-picker-card {\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n padding: 16px;\n cursor: pointer;\n text-align: center;\n transition: border-color 0.2s, background 0.15s;\n}\n\n.integration-picker-card:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-page);\n}\n\n.integration-picker-card.picker-selected {\n border-color: var(--mj-brand-primary);\n background: var(--mj-status-info-bg);\n}\n\n.picker-icon-circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n margin: 0 auto 10px;\n font-size: 18px;\n}\n\n.picker-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.picker-description {\n font-size: 12px;\n color: var(--mj-text-disabled);\n line-height: 1.3;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n/* ---------------------------------------------------------------------------\n Form Controls (Step 2)\n --------------------------------------------------------------------------- */\n\n.form-group {\n margin-bottom: 20px;\n}\n\n.form-label {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 6px;\n}\n\n.optional-label {\n font-weight: 400;\n color: var(--mj-text-disabled);\n}\n\n.form-input {\n width: 100%;\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.form-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input:disabled {\n background: var(--mj-bg-page);\n color: var(--mj-text-muted);\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 72px;\n}\n\n.form-hint {\n font-size: 13px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n/* Credential section */\n.credential-selected {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n border-radius: 8px;\n}\n\n.credential-info {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-status-success-text);\n font-size: 14px;\n font-weight: 500;\n}\n\n.credential-info i {\n color: var(--mj-status-success);\n}\n\n.credential-clear {\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n font-size: 14px;\n padding: 4px;\n border-radius: 4px;\n transition: color 0.15s;\n}\n\n.credential-clear:hover {\n color: var(--mj-status-error);\n}\n\n.credential-actions {\n display: flex;\n gap: 8px;\n}\n\n.credential-actions button {\n font-size: 13px;\n}\n\n.credential-loading {\n padding: 16px 0;\n}\n\n.credential-list {\n margin-top: 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.credential-list-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n cursor: pointer;\n font-size: 14px;\n color: var(--mj-text-secondary);\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n}\n\n.credential-list-item:last-child {\n border-bottom: none;\n}\n\n.credential-list-item:hover {\n background: var(--mj-bg-page);\n}\n\n.credential-list-item i {\n color: var(--mj-text-disabled);\n}\n\n/* ---------------------------------------------------------------------------\n Test Connection (Step 3)\n --------------------------------------------------------------------------- */\n\n.test-prompt {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.test-hint {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n.test-running {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n color: var(--mj-brand-primary);\n}\n\n.test-spinner {\n width: 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.test-running p {\n font-size: 15px;\n font-weight: 500;\n margin: 0;\n}\n\n/* Test result */\n.test-result {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 24px;\n border-radius: 12px;\n max-width: 400px;\n}\n\n.test-result-success {\n background: var(--mj-status-success-bg);\n}\n\n.test-result-failure {\n background: var(--mj-status-error-bg);\n}\n\n.test-result-icon {\n font-size: 48px;\n animation: scaleIn 0.3s ease-out;\n}\n\n.test-result-success .test-result-icon {\n color: var(--mj-status-success);\n}\n\n.test-result-failure .test-result-icon {\n color: var(--mj-status-error);\n}\n\n@keyframes scaleIn {\n from {\n transform: scale(0.5);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.test-result-message {\n font-size: 15px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.test-result-detail {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.test-retry-btn {\n margin-top: 4px;\n}\n\n/* Toggle switch */\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 44px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-border-strong);\n border-radius: 24px;\n transition: background 0.2s;\n}\n\n.toggle-slider::before {\n content: '';\n position: absolute;\n height: 18px;\n width: 18px;\n left: 3px;\n bottom: 3px;\n background: var(--mj-bg-surface);\n border-radius: 50%;\n transition: transform 0.2s;\n}\n\n.toggle-switch input:checked + .toggle-slider {\n background: var(--mj-brand-primary);\n}\n\n.toggle-switch input:checked + .toggle-slider::before {\n transform: translateX(20px);\n}\n\n/* ---------------------------------------------------------------------------\n Wizard Footer\n --------------------------------------------------------------------------- */\n\n.wizard-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-subtle);\n}\n\n.footer-left {\n display: flex;\n align-items: center;\n}\n\n.footer-right {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* ---------------------------------------------------------------------------\n Responsive\n --------------------------------------------------------------------------- */\n\n@media (max-width: 768px) {\n .connections-container {\n padding: 16px;\n }\n\n .card-grid {\n grid-template-columns: 1fr;\n }\n\n .integration-picker-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .step-indicator {\n padding: 16px;\n overflow-x: auto;\n }\n\n .step-line {\n width: 24px;\n }\n\n .credential-actions {\n flex-direction: column;\n }\n}\n\n@media (max-width: 480px) {\n .integration-picker-grid {\n grid-template-columns: 1fr;\n }\n\n .card-footer {\n flex-wrap: wrap;\n }\n}\n\n/* ---------------------------------------------------------------------------\n Delete confirmation overlay\n --------------------------------------------------------------------------- */\n\n.delete-confirm-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: 12px;\n animation: fadeIn 150ms ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.delete-confirm-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 20px;\n text-align: center;\n}\n\n.delete-warn-icon {\n font-size: 28px;\n color: var(--mj-status-error);\n}\n\n.delete-confirm-text {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n max-width: 220px;\n}\n\n.delete-confirm-actions {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n/* ---------------------------------------------------------------------------\n Edit panel (slide-in)\n --------------------------------------------------------------------------- */\n\n.edit-panel-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.1);\n z-index: 99;\n opacity: 0;\n pointer-events: none;\n transition: opacity 300ms ease;\n}\n\n.edit-panel-backdrop.open {\n opacity: 1;\n pointer-events: auto;\n}\n\n.edit-panel {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n max-width: 100%;\n background: var(--mj-bg-surface);\n border-left: 1px solid var(--mj-border-default);\n box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);\n z-index: 100;\n transform: translateX(100%);\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.edit-panel.open {\n transform: translateX(0);\n}\n\n.edit-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.edit-panel-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.edit-icon-circle {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 14px;\n}\n\n.edit-close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n font-size: 14px;\n transition: all 150ms ease;\n}\n\n.edit-close-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.edit-panel-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 20px;\n}\n\n.edit-panel-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.edit-form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.edit-form-label {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.edit-form-input {\n height: 36px;\n padding: 0 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n transition: border-color 150ms ease;\n}\n\n.edit-form-input:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.edit-readonly-field {\n padding: 8px 12px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.edit-toggle-row {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.edit-toggle-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n}\n\n.edit-toggle-label.active {\n color: var(--mj-status-success);\n}\n\n.edit-credential-selected {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-page);\n}\n\n.edit-credential-info {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.edit-credential-info i {\n color: var(--mj-brand-primary);\n}\n\n.edit-credential-clear {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n transition: all 150ms ease;\n}\n\n.edit-credential-clear:hover {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.edit-credential-actions {\n display: flex;\n gap: 8px;\n}\n\n.edit-credential-list {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 6px;\n max-height: 180px;\n overflow-y: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n}\n\n.edit-credential-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 150ms ease;\n}\n\n.edit-credential-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.edit-credential-item i {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.edit-panel-footer {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n Card clickable area\n --------------------------------------------------------------------------- */\n\n.card-clickable {\n cursor: pointer;\n}\n\n/* ---------------------------------------------------------------------------\n Detail View (entity maps for a selected integration)\n --------------------------------------------------------------------------- */\n\n.detail-view {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n\n.detail-header {\n display: flex;\n align-items: center;\n gap: 16px;\n padding-bottom: 20px;\n border-bottom: 1px solid var(--mj-border-subtle);\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.detail-header-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.detail-header-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.detail-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.detail-subtitle {\n font-size: 13px;\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.detail-header-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n/* Schedule section */\n.schedule-section {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n padding: 16px 20px;\n margin-bottom: 16px;\n}\n\n.schedule-section-header {\n margin-bottom: 12px;\n}\n\n.schedule-section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.schedule-section-title i {\n color: var(--mj-brand-primary);\n}\n\n.schedule-empty {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0;\n}\n\n.schedule-empty-text {\n font-size: 0.85rem;\n color: var(--mj-text-disabled);\n}\n\n.schedule-create-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-active) 100%);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.8rem;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.schedule-create-btn:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail toolbar */\n.detail-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.detail-toolbar-left {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-map-count {\n font-size: 13px;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.detail-search {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n}\n\n.detail-search i {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.detail-search input {\n border: none;\n outline: none;\n background: transparent;\n font-size: 13px;\n color: var(--mj-text-primary);\n width: 200px;\n}\n\n.detail-search input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n/* Add Map button */\n.add-map-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n}\n\n.add-map-btn.active {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n border-color: var(--mj-brand-primary);\n}\n\n.apply-all-btn {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.apply-all-btn:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n}\n\n.apply-all-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.add-map-btn-lg {\n margin-top: 16px;\n padding: 10px 20px;\n font-size: 14px;\n}\n\n/* Add map inline panel */\n.add-map-panel {\n padding: 16px;\n margin-bottom: 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n animation: fadeIn 200ms ease;\n}\n\n.add-map-row {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n}\n\n.add-map-field {\n flex: 1;\n min-width: 0;\n}\n\n.add-map-label {\n display: block;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-bottom: 6px;\n}\n\n.add-map-select {\n width: 100%;\n height: 34px;\n padding: 0 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n outline: none;\n cursor: pointer;\n}\n\n.add-map-select:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.add-map-direction-col {\n flex-shrink: 0;\n}\n\n.add-map-direction-btns {\n display: flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.add-map-direction-btns button {\n padding: 7px 12px;\n border: none;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n font-size: 13px;\n cursor: pointer;\n transition: all 150ms ease;\n border-right: 1px solid var(--mj-border-default);\n}\n\n.add-map-direction-btns button:last-child {\n border-right: none;\n}\n\n.add-map-direction-btns button:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.add-map-direction-btns button.active {\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n}\n\n.add-map-actions {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.add-map-save-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 16px;\n border: none;\n border-radius: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-bg-surface);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n white-space: nowrap;\n}\n\n.add-map-save-btn:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.add-map-save-btn:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n.add-map-cancel-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 34px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.add-map-cancel-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.add-map-loading {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n}\n\n.add-map-loading i {\n color: var(--mj-brand-primary);\n margin-right: 4px;\n}\n\n.add-map-hint {\n font-size: 12px;\n color: var(--mj-text-disabled);\n padding: 8px 0;\n font-style: italic;\n}\n\n/* Entity field needs more room for tree dropdown */\n.add-map-entity-field {\n flex: 2;\n min-width: 280px;\n}\n\n/* Entity picker row: tree dropdown + New button side by side */\n.entity-picker-row {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.entity-picker-row mj-tree-dropdown {\n flex: 1;\n min-width: 0;\n}\n\n.new-entity-btn {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: all 0.15s ease;\n}\n\n.new-entity-btn:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* ---------------------------------------------------------------------------\n Sync Result Banner\n --------------------------------------------------------------------------- */\n\n.sync-result-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 12px;\n animation: fadeIn 200ms ease;\n}\n\n.sync-result-banner.sync-success {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.sync-result-banner.sync-failure {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n/* ---------------------------------------------------------------------------\n Auto-Map Schema Panel\n --------------------------------------------------------------------------- */\n\n.auto-map-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.auto-map-header i {\n color: var(--mj-brand-primary);\n}\n\n.auto-map-result {\n margin-top: 12px;\n padding: 10px 14px;\n border-radius: 6px;\n font-size: 13px;\n}\n\n.auto-map-result.auto-map-success {\n background: var(--mj-status-success-bg);\n border: 1px solid var(--mj-status-success-border);\n color: var(--mj-status-success-text);\n}\n\n.auto-map-result.auto-map-partial {\n background: var(--mj-status-warning-bg);\n border: 1px solid var(--mj-status-warning-border);\n color: var(--mj-status-warning-text);\n}\n\n.auto-map-result.auto-map-failure {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n color: var(--mj-status-error-text);\n}\n\n.auto-map-result-summary {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n}\n\n.auto-map-errors {\n margin-top: 6px;\n font-size: 12px;\n}\n\n.auto-map-error {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n}\n\n/* ---------------------------------------------------------------------------\n New Entity Dialog\n --------------------------------------------------------------------------- */\n\n.new-entity-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1000;\n animation: fadeIn 0.15s ease;\n}\n\n.new-entity-dialog {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 640px;\n max-width: 90vw;\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-lg);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n animation: fadeIn 0.2s ease;\n}\n\n.new-entity-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.new-entity-dialog-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-close:hover {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.new-entity-dialog-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.new-entity-dialog-desc {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.new-entity-dialog-form {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.new-entity-dialog-row {\n display: flex;\n align-items: flex-end;\n gap: 8px;\n}\n\n.new-entity-dialog-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 120px;\n}\n\n.new-entity-dialog-field-wide {\n flex: 1;\n}\n\n.new-entity-dialog-label {\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.new-entity-dialog-input {\n padding: 8px 12px;\n font-size: var(--mj-text-sm);\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n transition: border-color 0.15s ease;\n}\n\n.new-entity-dialog-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);\n}\n\n.new-entity-dialog-dot {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n padding-bottom: 6px;\n user-select: none;\n}\n\n.new-entity-dialog-value {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n padding: 8px 0 4px;\n}\n\n.new-entity-dialog-hint {\n font-style: italic;\n color: var(--mj-text-disabled);\n font-weight: 400;\n}\n\n.new-entity-dialog-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.new-entity-preview-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-inverse);\n background: var(--mj-brand-primary);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n white-space: nowrap;\n transition: background 0.15s ease;\n}\n\n.new-entity-preview-btn:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n}\n\n.new-entity-preview-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.new-entity-dialog-done-btn {\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.new-entity-dialog-done-btn:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n/* Next steps callout inside dialog */\n.new-entity-next-steps {\n background: var(--mj-brand-primary-subtle);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 14px 16px;\n}\n\n.new-entity-next-steps h4 {\n margin: 0 0 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-brand-primary-hover);\n}\n\n.new-entity-next-steps h4 i {\n margin-right: 6px;\n}\n\n.new-entity-next-steps ol {\n margin: 0;\n padding-left: 20px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n line-height: 1.7;\n}\n\n/* DDL copy button */\n.ddl-copy-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: transparent;\n border: 1px solid var(--mj-border-strong);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.ddl-copy-btn:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n/* DDL Preview */\n.ddl-warnings {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.ddl-warning {\n font-size: 12px;\n color: var(--mj-status-warning);\n background: var(--mj-status-warning-subtle);\n padding: 6px 10px;\n border-radius: var(--mj-radius-sm);\n border-left: 3px solid var(--mj-status-warning);\n}\n\n.ddl-warning i {\n margin-right: 4px;\n}\n\n.ddl-preview-block {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n max-height: 300px;\n display: flex;\n flex-direction: column;\n}\n\n.ddl-preview-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-secondary);\n}\n\n.ddl-preview-code {\n margin: 0;\n padding: 12px 16px;\n font-size: 12px;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n line-height: 1.6;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-word;\n flex: 1;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Detail empty state */\n.detail-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty i {\n font-size: 36px;\n margin-bottom: 12px;\n color: var(--mj-text-disabled);\n}\n\n.detail-empty h3 {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 6px;\n}\n\n.detail-empty p {\n font-size: 13px;\n margin: 0;\n max-width: 400px;\n}\n\n/* Detail table */\n.detail-table-head {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px 8px 0 0;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--mj-text-secondary);\n}\n\n.detail-table-body {\n border: 1px solid var(--mj-border-default);\n border-top: none;\n border-radius: 0 0 8px 8px;\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n}\n\n.detail-map-row {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-bottom: 1px solid var(--mj-border-subtle);\n transition: background 0.15s;\n font-size: 13px;\n}\n\n.detail-map-row:last-child {\n border-bottom: none;\n}\n\n.detail-map-row:hover {\n background: var(--mj-bg-page);\n cursor: pointer;\n}\n\n.detail-map-row.sync-disabled {\n opacity: 0.5;\n}\n\n/* Column widths (shared between head and body) */\n.dt-col-toggle {\n width: 60px;\n flex-shrink: 0;\n}\n\n.dt-col-source {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.dt-col-direction {\n width: 80px;\n flex-shrink: 0;\n text-align: center;\n}\n\n.dt-col-dest {\n flex: 2;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--mj-text-primary);\n}\n\n.dt-col-meta {\n width: 80px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 6px;\n justify-content: flex-end;\n}\n\n/* Direction badge */\n.direction-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 4px;\n white-space: nowrap;\n}\n\n.direction-badge.pull {\n background: var(--mj-status-info-bg);\n color: var(--mj-brand-primary);\n}\n\n.direction-badge.push {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success);\n}\n\n.direction-badge.bidirectional {\n background: var(--mj-status-warning-subtle);\n color: var(--mj-status-warning);\n}\n\n/* Config badges */\n.detail-config-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-disabled);\n font-size: 11px;\n}\n\n/* Detail back button (icon-only) */\n.detail-back-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 16px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-back-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n/* Detail edit button (icon-only) */\n.detail-edit-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 14px;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n}\n\n.detail-edit-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n/* Chevron hint on entity map rows */\n.map-edit-hint {\n color: var(--mj-text-disabled);\n font-size: 11px;\n transition: color 0.15s;\n}\n\n.detail-map-row:hover .map-edit-hint {\n color: var(--mj-brand-primary);\n}\n\n/* Entity map editor header */\n.ve-header-title-inline {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n}\n\n.ve-source-label {\n color: var(--mj-brand-primary);\n}\n\n.ve-direction-icon {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.ve-dest-label {\n color: var(--mj-status-success);\n}\n\n.ve-stat-inline {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.ve-stat-inline strong {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n.detail-table-empty {\n padding: 24px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n/* ---------------------------------------------------------------------------\n Discovered Source Objects Section\n --------------------------------------------------------------------------- */\n\n.discovered-objects-section {\n margin: 12px 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n overflow: hidden;\n}\n\n.discovered-objects-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.discovered-objects-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.discovered-objects-title i {\n color: var(--mj-brand-primary);\n}\n\n.discovered-count {\n font-weight: 400;\n color: var(--mj-text-muted);\n font-size: 12px;\n}\n\n.discovered-objects-actions {\n display: flex;\n gap: 8px;\n}\n\n.discovered-action-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: none;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n padding: 3px 10px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n\n.discovered-action-btn:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-primary);\n}\n\n.discovered-action-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.discovered-loading,\n.discovered-empty {\n padding: 16px;\n text-align: center;\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.discovered-loading i {\n margin-right: 6px;\n}\n\n.discovered-objects-list {\n max-height: 280px;\n overflow-y: auto;\n}\n\n.discovered-object-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 7px 14px;\n cursor: pointer;\n transition: background 0.1s;\n border-bottom: 1px solid var(--mj-border-subtle);\n font-size: 13px;\n}\n\n.discovered-object-row:last-child {\n border-bottom: none;\n}\n\n.discovered-object-row:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.discovered-object-row.selected {\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n}\n\n.discovered-object-row input[type=\"checkbox\"] {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.discovered-object-name {\n flex: 1;\n color: var(--mj-text-primary);\n font-weight: 500;\n}\n\n.discovered-object-api-name {\n flex: 1;\n color: var(--mj-text-muted);\n font-size: 12px;\n font-family: monospace;\n}\n\n.discovered-object-badges {\n display: flex;\n gap: 4px;\n}\n\n.discovered-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n font-size: 10px;\n}\n\n.discovered-badge.incremental {\n color: var(--mj-status-success);\n background: var(--mj-status-success-bg);\n}\n\n.discovered-badge.writable {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n"] }]
2700
2700
  }], null, { entityTreeDropdown: [{
2701
2701
  type: ViewChild,
2702
2702
  args: ['entityTreeDropdown']