@acorex/modules 21.0.0-next.34 → 21.0.0-next.39

package/fesm2022/acorex-modules-workflow-management.mjs

@@ -5,43 +5,43 @@ import { AXPSessionService, AXPAuthGuard, AXP_PERMISSION_DEFINITION_PROVIDER } f
 import { AXPEntityService, AXPEntityFormBuilderService, AXPEntityDefinitionRegistryService, entityDetailsCrudActions, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import { firstValueFrom } from 'rxjs';
 import { AXMCalendarManagementModule } from '@acorex/modules/calendar-management';
-import { AXPEntityCommandScope, AXPSystemStatuses, AXP_MENU_PROVIDER } from '@acorex/platform/common';
-import { createMultiLanguageString, AXPSystemActionType, AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER, AXP_MODULE_MANIFEST_PROVIDER, AXPMultiLanguageStringResolverService } from '@acorex/platform/core';
+import { AXPEntityCommandScope, AXPStatusProvider, AXPSystemStatusType, systemStatusToDefinition, AXPSystemStatuses, AXP_STATUS_PROVIDERS, AXP_MENU_PROVIDER } from '@acorex/platform/common';
+import { AXPSystemActionType, AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER, AXP_MODULE_MANIFEST_PROVIDER, provideLazyProvider } from '@acorex/platform/core';
+import { AXP_PAGE_COMPONENT_PROVIDER, AXPPropertyViewerComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPThemeLayoutStartSideComponent } from '@acorex/platform/layout/components';
 import { AXPDomainModule } from '@acorex/platform/domain';
-import { AXPWidgetGroupEnum, AXP_WIDGETS_EDITOR_CATEGORY, AXPWidgetSerializationHelper, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex/platform/layout/widget-core';
-import { AXPBarChartWidget, AXPDonutChartWidget, AXPLineChartWidget, AXPGaugeChartWidget } from '@acorex/modules/dashboard-management';
+import { AXPWidgetGroupEnum, AXP_WIDGETS_EDITOR_CATEGORY, AXPWidgetSerializationHelper, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER, mapAXPPropertyToWidgetProperty } from '@acorex/platform/layout/widget-core';
+import { AXPBarChartWidget, AXPHeatmapChartWidget, AXPDonutChartWidget, AXPLineChartWidget, AXPGaugeChartWidget, AXPFunnelChartWidget, AXPKpiDetailsWidget, AXPKpiProgressWidget, AXPKpiSegmentedWidget, AXPKpiStatCardWidget } from '@acorex/modules/dashboard-management';
+import * as i5$1 from '@acorex/core/translation';
+import { createMultiLanguageString, AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY } from '@acorex/platform/layout/widgets';
 import { provideCommandSetups } from '@acorex/platform/runtime';
 import { AXPWorkflowManager, AXPWorkflowDefinitionService, AXP_WORKFLOW_PROVIDER, AXP_ACTIVITY_CATEGORY_PROVIDER, AXP_ACTIVITY_PROVIDER, AXP_WORKFLOW_CATEGORY_PROVIDER, AXPActivityDefinitionService } from '@acorex/platform/workflow';
 import { ROUTES, ActivatedRoute, Router } from '@angular/router';
 import { AXDialogService } from '@acorex/components/dialog';
-import * as i8 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPDialogRendererComponent, AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { cloneDeep } from 'lodash-es';
 import { AXToastService } from '@acorex/components/toast';
 import { AXPWorkflowTaskProvider, AXP_WORKFLOW_TASK_PROVIDER } from '@acorex/modules/task-management';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i7 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i2$1 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/text-box';
-import { AXTextBoxModule } from '@acorex/components/text-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i5 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i6 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import { AXTabsModule } from '@acorex/components/tabs';
+import * as i4 from '@acorex/components/text-box';
+import { AXTextBoxModule } from '@acorex/components/text-box';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
-import { AXPPropertyViewerComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPThemeLayoutStartSideComponent } from '@acorex/platform/layout/components';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
 import * as i1 from '@acorex/components/tree-view-legacy';
 import { AXTreeViewLegacyModule } from '@acorex/components/tree-view-legacy';
 
@@ -49,6 +49,8 @@ const config = {
     i18n: 'workflow-management',
     module: 'WorkflowManagement',
 };
+/** Builds extended dashboard widget type ids: `{module}:Widget:Dashboard:{Segment}`. */
+const workflowDashboardWidgetId = (segment) => `${config.module}:Widget:Dashboard:${segment}`;
 const RootConfig = {
     config,
     module: {
@@ -114,12 +116,54 @@ const RootConfig = {
             tasksNearDeadline: `${config.module}:DataSource:TasksNearDeadline`,
             bottleneckActivities: `${config.module}:DataSource:BottleneckActivities`,
             errorsByCategory: `${config.module}:DataSource:ErrorsByCategory`,
+            /** Workflow instance funnel: counts per stage (created -> completed). */
+            instanceConversionFunnel: `${config.module}:DataSource:InstanceConversionFunnel`,
+            /** Heatmap: errors by activity/stage and weekday (or day bucket). */
+            errorsByActivityDayHeatmap: `${config.module}:DataSource:ErrorsByActivityDayHeatmap`,
             workloadPerUserActive: `${config.module}:DataSource:WorkloadPerUserActive`,
             workloadPerUserOverdue: `${config.module}:DataSource:WorkloadPerUserOverdue`,
             workloadPerUserAvgAgeHours: `${config.module}:DataSource:WorkloadPerUserAvgAgeHours`,
             workloadOverloadedUsers: `${config.module}:DataSource:WorkloadOverloadedUsers`,
             slaRiskPrediction: `${config.module}:DataSource:SlaRiskPrediction`,
         },
+        dashboardKpi: {
+            slaComplianceSnapshot: `${config.module}:DataSource:SlaComplianceSnapshot`,
+            taskStatusBreakdown: `${config.module}:DataSource:TaskStatusBreakdown`,
+            throughputOverview: `${config.module}:DataSource:ThroughputOverview`,
+            kpiStatCard: `${config.module}:DataSource:KpiStatCard`,
+        },
+    },
+    /** Extended dashboard widget type ids; used by workflow dashboard widget configs. */
+    widgets: {
+        barChart: workflowDashboardWidgetId('BarChart'),
+        tasksNearDeadlineBar: workflowDashboardWidgetId('TasksNearDeadlineBar'),
+        pendingTasksByAgeBar: workflowDashboardWidgetId('PendingTasksByAgeBar'),
+        overdueTasksBar: workflowDashboardWidgetId('OverdueTasksBar'),
+        bottleneckBar: workflowDashboardWidgetId('BottleneckBar'),
+        workloadPerUserOverdueBar: workflowDashboardWidgetId('WorkloadPerUserOverdueBar'),
+        stuckProcessesBar: workflowDashboardWidgetId('StuckProcessesBar'),
+        slaRiskPredictionBar: workflowDashboardWidgetId('SlaRiskPredictionBar'),
+        failedProcessesByTypeDonut: workflowDashboardWidgetId('FailedProcessesByTypeDonut'),
+        failedProcessesTrendLine: workflowDashboardWidgetId('FailedProcessesTrendLine'),
+        throughputDailyLine: workflowDashboardWidgetId('ThroughputDailyLine'),
+        throughputWeeklyLine: workflowDashboardWidgetId('ThroughputWeeklyLine'),
+        failedProcessesSummaryBar: workflowDashboardWidgetId('FailedProcessesSummaryBar'),
+        workloadPerUserActiveBar: workflowDashboardWidgetId('WorkloadPerUserActiveBar'),
+        workloadPerUserAvgAgeBar: workflowDashboardWidgetId('WorkloadPerUserAvgAgeBar'),
+        overloadedUsersBar: workflowDashboardWidgetId('OverloadedUsersBar'),
+        donutChart: workflowDashboardWidgetId('DonutChart'),
+        slaViolationsBar: workflowDashboardWidgetId('SlaViolationsBar'),
+        gaugeChart: workflowDashboardWidgetId('GaugeChart'),
+        lineChart: workflowDashboardWidgetId('LineChart'),
+        slaTrendLine: workflowDashboardWidgetId('SlaTrendLine'),
+        errorsBar: workflowDashboardWidgetId('ErrorsBar'),
+        instanceConversionFunnel: workflowDashboardWidgetId('InstanceConversionFunnel'),
+        errorsHeatmap: workflowDashboardWidgetId('ErrorsHeatmap'),
+        systemHealthBar: workflowDashboardWidgetId('SystemHealthBar'),
+        kpiDetails: workflowDashboardWidgetId('KpiDetails'),
+        kpiProgress: workflowDashboardWidgetId('KpiProgress'),
+        kpiSegmented: workflowDashboardWidgetId('KpiSegmented'),
+        kpiStatCard: workflowDashboardWidgetId('KpiStatCard'),
     },
 };
 
@@ -135,11 +179,11 @@ class AXMWorkflowManagementModuleEntityProvider {
         if (moduleName === RootConfig.module.name) {
             switch (entityName) {
                 case RootConfig.entities.workflowDefinition.name:
-                    return (await import('./acorex-modules-workflow-management-workflow-definition.entity-aJou58ED.mjs')).factory();
+                    return (await import('./acorex-modules-workflow-management-workflow-definition.entity-DqPVpcSv.mjs')).factory();
                 case RootConfig.entities.workflowInstance.name:
-                    return (await import('./acorex-modules-workflow-management-workflow-instance.entity-Cq7LE7u5.mjs')).factory();
+                    return (await import('./acorex-modules-workflow-management-workflow-instance.entity-sfsoT0is.mjs')).factory();
                 case RootConfig.entities.activityDefinition.name:
-                    return (await import('./acorex-modules-workflow-management-activity-definition.entity-Bvs1OfE_.mjs')).factory();
+                    return (await import('./acorex-modules-workflow-management-activity-definition.entity-B3DkgDQb.mjs')).factory();
                 case RootConfig.entities.automation.name:
                     return (await import('./acorex-modules-workflow-management-automation.entity-BigK8yE2.mjs')).factory();
             }
@@ -164,7 +208,6 @@ const AXPWorkflowManagementMenuKeys = {
     WorkflowInstances: 'workflow-management:workflow-instances',
     WorkflowStudio: 'workflow-management:workflow-studio',
     Activities: 'workflow-management:activities',
-    ActivityDefinitions: 'workflow-management:activity-definitions',
 };
 
 class AXMMenuProvider {
@@ -223,16 +266,6 @@ class AXMMenuProvider {
                     features: [module.name],
                 },
             },
-            {
-                name: AXPWorkflowManagementMenuKeys.ActivityDefinitions,
-                text: '@workflow-management:activities.menus.activity.title',
-                path: this.entityService.createPath(module.name, RootConfig.entities.activityDefinition.name),
-                priority: 4,
-                icon: RootConfig.entities.activityDefinition.icon,
-                policy: {
-                    features: [module.name],
-                },
-            },
         ]);
     }
 }
@@ -251,29 +284,72 @@ const AXMWorkflowErrorsBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-errors-bar',
-        title: createMultiLanguageString('Workflow Error Categorization', 'دسته‌بندی خطاهای گردش کار'),
+        name: RootConfig.widgets.errorsBar,
+        title: '@workflow-management:dashboard-widgets.workflow-errors-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-errors-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Errors by type and code', 'خطاها بر اساس نوع و کد'),
-            xAxisLabel: createMultiLanguageString('Error category', 'دسته خطا'),
-            yAxisLabel: createMultiLanguageString('Occurrences', 'تکرار'),
+            title: '@workflow-management:dashboard-widgets.workflow-errors-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-errors-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-errors-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.errorsByCategory,
         },
     },
 };
 
+/**
+ * Real-world use case:
+ * Heatmap of workflow errors by activity/stage (Y) and day bucket (X).
+ *
+ * Typical interpretation:
+ * - X: weekday ("Mon".."Sun") or recent days ("D-6".. "Today")
+ * - Y: activity name / step name (e.g. "Approval", "Validation", "Notify")
+ * - value: error count
+ * - label: optional preformatted tooltip value (e.g. "12 errors")
+ *
+ * DataSource contract (items):
+ * - `{ x: string|number, y: string|number, value: number, label?: string }[]`
+ */
+const AXMWorkflowErrorsHeatmapAXPExtendedWidget = {
+    parentName: AXPHeatmapChartWidget.name,
+    widget: {
+        ...AXPHeatmapChartWidget,
+        name: RootConfig.widgets.errorsHeatmap,
+        title: '@workflow-management:dashboard-widgets.workflow-errors-heatmap.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-errors-heatmap.widget-description',
+        groups: [AXPWidgetGroupEnum.DashboardWidget],
+        categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
+        options: {
+            showXAxis: true,
+            showYAxis: true,
+            showTooltip: true,
+            // xAxisLabel: '@workflow-management:dashboard-widgets.workflow-errors-heatmap.x-axis-label',
+            // yAxisLabel: '@workflow-management:dashboard-widgets.workflow-errors-heatmap.y-axis-label',
+            cellPadding: 0.08,
+            borderRadius: 3,
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+            dataSource: RootConfig.dataSources.dashboardChart.errorsByActivityDayHeatmap,
+            messages: {
+                noData: '@workflow-management:dashboard-widgets.common.no-data',
+                noDataHelp: '@workflow-management:dashboard-widgets.workflow-errors-heatmap.no-data-help',
+            },
+        },
+    },
+};
+
 const AXMWorkflowFailedProcessesByTypeDonutChartAXPExtendedWidget = {
     parentName: AXPDonutChartWidget.name,
     widget: {
         ...AXPDonutChartWidget,
-        name: 'workflow-failed-processes-by-type-donut',
-        title: createMultiLanguageString('Workflow Failed Processes by Type', 'فرایندهای ناموفق بر اساس نوع'),
+        name: RootConfig.widgets.failedProcessesByTypeDonut,
+        title: '@workflow-management:dashboard-widgets.workflow-failed-processes-by-type-donut.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-failed-processes-by-type-donut.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Affected Process Types', 'انواع فرایند تحت تأثیر'),
+            title: '@workflow-management:dashboard-widgets.workflow-failed-processes-by-type-donut.chart-title',
             dataSource: RootConfig.dataSources.dashboardChart.failedProcessesByType,
         },
     },
@@ -283,14 +359,15 @@ const AXMWorkflowFailedProcessesSummaryBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-failed-processes-summary-bar',
-        title: createMultiLanguageString('Workflow Failed Processes Summary', 'خلاصه فرایندهای ناموفق گردش کار'),
+        name: RootConfig.widgets.failedProcessesSummaryBar,
+        title: '@workflow-management:dashboard-widgets.workflow-failed-processes-summary-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-failed-processes-summary-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Total vs Recent Failures', 'کل در مقابل شکست‌های اخیر'),
-            xAxisLabel: createMultiLanguageString('Scope', 'محدوده'),
-            yAxisLabel: createMultiLanguageString('Instances', 'نمونه‌ها'),
+            title: '@workflow-management:dashboard-widgets.workflow-failed-processes-summary-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-failed-processes-summary-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-failed-processes-summary-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.failedProcessesSummary,
         },
     },
@@ -300,14 +377,15 @@ const AXMWorkflowFailedProcessesTrendLineChartAXPExtendedWidget = {
     parentName: AXPLineChartWidget.name,
     widget: {
         ...AXPLineChartWidget,
-        name: 'workflow-failed-processes-trend-line',
-        title: createMultiLanguageString('Workflow Failed Instances Trend', 'روند نمونه‌های ناموفق گردش کار'),
+        name: RootConfig.widgets.failedProcessesTrendLine,
+        title: '@workflow-management:dashboard-widgets.workflow-failed-processes-trend-line.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-failed-processes-trend-line.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Failed Instances by Week', 'نمونه‌های ناموفق بر اساس هفته'),
-            xAxisLabel: createMultiLanguageString('Week', 'هفته'),
-            yAxisLabel: createMultiLanguageString('Failures', 'شکست‌ها'),
+            title: '@workflow-management:dashboard-widgets.workflow-failed-processes-trend-line.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-failed-processes-trend-line.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-failed-processes-trend-line.y-axis-label',
             fillArea: false,
             yAxisStartsAtZero: true,
             dataSource: RootConfig.dataSources.dashboardChart.failedProcessFailureTrend,
@@ -319,14 +397,15 @@ const AXMWorkflowStuckProcessesBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-stuck-processes-bar',
-        title: createMultiLanguageString('Workflow Stuck Processes', 'فرایندهای گیرکرده گردش کار'),
+        name: RootConfig.widgets.stuckProcessesBar,
+        title: '@workflow-management:dashboard-widgets.workflow-stuck-processes-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-stuck-processes-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Idle Time by Instance (hours)', 'زمان بیکاری بر اساس نمونه (ساعت)'),
-            xAxisLabel: createMultiLanguageString('Instance', 'نمونه'),
-            yAxisLabel: createMultiLanguageString('Hours without progress', 'ساعت بدون پیشرفت'),
+            title: '@workflow-management:dashboard-widgets.workflow-stuck-processes-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-stuck-processes-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-stuck-processes-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.stuckProcesses,
         },
     },
@@ -336,13 +415,14 @@ const AXMWorkflowGaugeChartAXPExtendedWidget = {
     parentName: AXPGaugeChartWidget.name,
     widget: {
         ...AXPGaugeChartWidget,
-        name: 'workflow-gauge-chart',
-        title: createMultiLanguageString('Workflow SLA Compliance', 'انطباق SLA گردش کار'),
+        name: RootConfig.widgets.gaugeChart,
+        title: '@workflow-management:dashboard-widgets.workflow-gauge-chart.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-gauge-chart.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('SLA Compliance', 'انطباق SLA'),
-            label: createMultiLanguageString('Resolved In SLA (%)', 'حل‌شده در SLA (٪)'),
+            title: '@workflow-management:dashboard-widgets.workflow-gauge-chart.chart-title',
+            label: '@workflow-management:dashboard-widgets.workflow-gauge-chart.gauge-label',
             dataSource: RootConfig.dataSources.dashboardChart.slaCompliance,
             minValue: 0,
             maxValue: 100,
@@ -350,10 +430,18 @@ const AXMWorkflowGaugeChartAXPExtendedWidget = {
                 {
                     value: 30,
                     color: 'rgba(var(--ax-sys-color-danger-500))',
-                    label: 'Low',
+                    label: '@workflow-management:dashboard-widgets.workflow-gauge-chart.threshold-low',
+                },
+                {
+                    value: 70,
+                    color: 'rgba(var(--ax-sys-color-warning-500))',
+                    label: '@workflow-management:dashboard-widgets.workflow-gauge-chart.threshold-medium',
+                },
+                {
+                    value: 100,
+                    color: 'rgba(var(--ax-sys-color-success-500))',
+                    label: '@workflow-management:dashboard-widgets.workflow-gauge-chart.threshold-high',
                 },
-                { value: 70, color: 'rgba(var(--ax-sys-color-warning-500))', label: 'Medium' },
-                { value: 100, color: 'rgba(var(--ax-sys-color-success-500))', label: 'High' },
             ],
         },
     },
@@ -363,14 +451,15 @@ const AXMWorkflowSlaRiskPredictionBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-sla-risk-prediction-bar',
-        title: createMultiLanguageString('Workflow SLA Risk Prediction', 'پیش‌بینی ریسک SLA گردش کار'),
+        name: RootConfig.widgets.slaRiskPredictionBar,
+        title: '@workflow-management:dashboard-widgets.workflow-sla-risk-prediction-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-sla-risk-prediction-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Likely breach risk score (0–100)', 'امتیاز ریسک نقض محتمل (۰–۱۰۰)'),
-            xAxisLabel: createMultiLanguageString('Item', 'مورد'),
-            yAxisLabel: createMultiLanguageString('Risk score', 'امتیاز ریسک'),
+            title: '@workflow-management:dashboard-widgets.workflow-sla-risk-prediction-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-sla-risk-prediction-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-sla-risk-prediction-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.slaRiskPrediction,
         },
     },
@@ -380,14 +469,15 @@ const AXMWorkflowSlaTrendLineChartAXPExtendedWidget = {
     parentName: AXPLineChartWidget.name,
     widget: {
         ...AXPLineChartWidget,
-        name: 'workflow-sla-trend-line',
-        title: createMultiLanguageString('Workflow SLA Compliance Trend', 'روند انطباق SLA گردش کار'),
+        name: RootConfig.widgets.slaTrendLine,
+        title: '@workflow-management:dashboard-widgets.workflow-sla-trend-line.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-sla-trend-line.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Resolved Within SLA (%)', 'حل‌شده در SLA (٪)'),
-            xAxisLabel: createMultiLanguageString('Week', 'هفته'),
-            yAxisLabel: createMultiLanguageString('Percent', 'درصد'),
+            title: '@workflow-management:dashboard-widgets.workflow-sla-trend-line.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-sla-trend-line.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-sla-trend-line.y-axis-label',
             fillArea: true,
             yAxisStartsAtZero: false,
             dataSource: RootConfig.dataSources.dashboardChart.slaComplianceTrend,
@@ -399,14 +489,15 @@ const AXMWorkflowSlaViolationsBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-sla-violations-bar',
-        title: createMultiLanguageString('Workflow SLA Violations & Delay', 'تخلفات SLA و تأخیر گردش کار'),
+        name: RootConfig.widgets.slaViolationsBar,
+        title: '@workflow-management:dashboard-widgets.workflow-sla-violations-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-sla-violations-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Violations and Average Delay', 'تخلفات و میانگین تأخیر'),
-            xAxisLabel: createMultiLanguageString('Measure', 'معیار'),
-            yAxisLabel: createMultiLanguageString('Count / Hours', 'تعداد / ساعت'),
+            title: '@workflow-management:dashboard-widgets.workflow-sla-violations-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-sla-violations-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-sla-violations-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.slaViolationsAndDelay,
         },
     },
@@ -416,14 +507,15 @@ const AXMWorkflowSystemHealthBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-system-health-bar',
-        title: createMultiLanguageString('Workflow System Health Summary', 'خلاصه وضعیت سلامت گردش کار'),
+        name: RootConfig.widgets.systemHealthBar,
+        title: '@workflow-management:dashboard-widgets.workflow-system-health-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-system-health-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Instances, Tasks, and SLA', 'نمونه‌ها، وظایف و SLA'),
-            xAxisLabel: createMultiLanguageString('Metric', 'شاخص'),
-            yAxisLabel: createMultiLanguageString('Count / %', 'تعداد / ٪'),
+            title: '@workflow-management:dashboard-widgets.workflow-system-health-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-system-health-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-system-health-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.systemHealthSummary,
         },
     },
@@ -433,14 +525,15 @@ const AXMWorkflowOverdueTasksBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-overdue-tasks-bar',
-        title: createMultiLanguageString('Workflow Overdue Tasks by Process', 'وظایف معوقه گردش کار بر اساس فرایند'),
+        name: RootConfig.widgets.overdueTasksBar,
+        title: '@workflow-management:dashboard-widgets.workflow-overdue-tasks-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-overdue-tasks-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Overdue Tasks (by process type)', 'وظایف معوقه (بر اساس نوع فرایند)'),
-            xAxisLabel: createMultiLanguageString('Process type', 'نوع فرایند'),
-            yAxisLabel: createMultiLanguageString('Overdue tasks', 'وظایف معوقه'),
+            title: '@workflow-management:dashboard-widgets.workflow-overdue-tasks-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-overdue-tasks-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-overdue-tasks-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.overdueTasksByProcess,
         },
     },
@@ -450,14 +543,15 @@ const AXMWorkflowPendingTasksByAgeBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-pending-tasks-by-age-bar',
-        title: createMultiLanguageString('Workflow Pending Tasks by Age', 'وظایف در انتظار گردش کار بر اساس قدمت'),
+        name: RootConfig.widgets.pendingTasksByAgeBar,
+        title: '@workflow-management:dashboard-widgets.workflow-pending-tasks-by-age-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-pending-tasks-by-age-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Pending Tasks by Age Bucket', 'وظایف در انتظار بر اساس بازه قدمت'),
-            xAxisLabel: createMultiLanguageString('Age Bucket', 'بازه قدمت'),
-            yAxisLabel: createMultiLanguageString('Tasks', 'وظایف'),
+            title: '@workflow-management:dashboard-widgets.workflow-pending-tasks-by-age-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-pending-tasks-by-age-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-pending-tasks-by-age-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.pendingTasksByAge,
         },
     },
@@ -467,14 +561,15 @@ const AXMWorkflowLineChartAXPExtendedWidget = {
     parentName: AXPLineChartWidget.name,
     widget: {
         ...AXPLineChartWidget,
-        name: 'workflow-line-chart',
-        title: createMultiLanguageString('Workflow Throughput Trend', 'روند توان عملیات گردش کار'),
+        name: RootConfig.widgets.lineChart,
+        title: '@workflow-management:dashboard-widgets.workflow-line-chart.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-line-chart.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Created vs Completed (Last 8 Weeks)', 'ایجادشده و تکمیل‌شده (۸ هفته اخیر)'),
-            xAxisLabel: createMultiLanguageString('Week', 'هفته'),
-            yAxisLabel: createMultiLanguageString('Items', 'تعداد'),
+            title: '@workflow-management:dashboard-widgets.workflow-line-chart.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-line-chart.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-line-chart.y-axis-label',
             fillArea: false,
             /** Focus Y domain on the data range so the two series are readable (not squashed to the top band). */
             yAxisStartsAtZero: false,
@@ -483,18 +578,50 @@ const AXMWorkflowLineChartAXPExtendedWidget = {
     },
 };
 
+/**
+ * Real-world use case:
+ * A conversion funnel across workflow instance lifecycle stages (Created -> Assigned -> In progress -> Completed).
+ *
+ * DataSource contract (items):
+ * - `{ name: string, value: number, color?: string }[]`
+ */
+const AXMWorkflowInstanceConversionFunnelAXPExtendedWidget = {
+    parentName: AXPFunnelChartWidget.name,
+    widget: {
+        ...AXPFunnelChartWidget,
+        name: RootConfig.widgets.instanceConversionFunnel,
+        title: '@workflow-management:dashboard-widgets.workflow-instance-conversion-funnel.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-instance-conversion-funnel.widget-description',
+        groups: [AXPWidgetGroupEnum.DashboardWidget],
+        categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
+        options: {
+            showLabels: true,
+            showTooltip: true,
+            neckWidth: 0.25,
+            animationEasing: 'cubic-out',
+            animationDuration: 800,
+            margin: { top: 16, right: 16, bottom: 16, left: 16 },
+            dataSource: RootConfig.dataSources.dashboardChart.instanceConversionFunnel,
+            messages: {
+                noData: '@workflow-management:dashboard-widgets.common.no-data',
+            },
+        },
+    },
+};
+
 const AXMWorkflowThroughputDailyLineChartAXPExtendedWidget = {
     parentName: AXPLineChartWidget.name,
     widget: {
         ...AXPLineChartWidget,
-        name: 'workflow-throughput-daily-line',
-        title: createMultiLanguageString('Workflow Created vs Completed (Daily)', 'ایجاد و تکمیل روزانه گردش کار'),
+        name: RootConfig.widgets.throughputDailyLine,
+        title: '@workflow-management:dashboard-widgets.workflow-throughput-daily-line.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-throughput-daily-line.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Created vs Completed — Daily', 'ایجاد در مقابل تکمیل — روزانه'),
-            xAxisLabel: createMultiLanguageString('Day', 'روز'),
-            yAxisLabel: createMultiLanguageString('Items', 'تعداد'),
+            title: '@workflow-management:dashboard-widgets.workflow-throughput-daily-line.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-throughput-daily-line.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-throughput-daily-line.y-axis-label',
             fillArea: false,
             yAxisStartsAtZero: false,
             dataSource: RootConfig.dataSources.dashboardChart.throughputDaily,
@@ -506,14 +633,15 @@ const AXMWorkflowThroughputWeeklyLineChartAXPExtendedWidget = {
     parentName: AXPLineChartWidget.name,
     widget: {
         ...AXPLineChartWidget,
-        name: 'workflow-throughput-weekly-line',
-        title: createMultiLanguageString('Workflow Created vs Completed (Weekly)', 'ایجاد و تکمیل هفتگی گردش کار'),
+        name: RootConfig.widgets.throughputWeeklyLine,
+        title: '@workflow-management:dashboard-widgets.workflow-throughput-weekly-line.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-throughput-weekly-line.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Created vs Completed — Weekly', 'ایجاد در مقابل تکمیل — هفتگی'),
-            xAxisLabel: createMultiLanguageString('Week', 'هفته'),
-            yAxisLabel: createMultiLanguageString('Items', 'تعداد'),
+            title: '@workflow-management:dashboard-widgets.workflow-throughput-weekly-line.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-throughput-weekly-line.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-throughput-weekly-line.y-axis-label',
             fillArea: false,
             yAxisStartsAtZero: false,
             dataSource: RootConfig.dataSources.dashboardChart.throughputWeekly,
@@ -525,14 +653,15 @@ const AXMWorkflowBottleneckBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-bottleneck-bar',
-        title: createMultiLanguageString('Workflow Bottleneck Detection', 'تشخیص گلوگاه گردش کار'),
+        name: RootConfig.widgets.bottleneckBar,
+        title: '@workflow-management:dashboard-widgets.workflow-bottleneck-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-bottleneck-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Highest average wait by activity', 'بیشترین میانگین انتظار بر اساس فعالیت'),
-            xAxisLabel: createMultiLanguageString('Activity / step', 'فعالیت / گام'),
-            yAxisLabel: createMultiLanguageString('Avg wait (hours)', 'میانگین انتظار (ساعت)'),
+            title: '@workflow-management:dashboard-widgets.workflow-bottleneck-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-bottleneck-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-bottleneck-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.bottleneckActivities,
         },
     },
@@ -542,12 +671,13 @@ const AXMWorkflowDonutChartAXPExtendedWidget = {
     parentName: AXPDonutChartWidget.name,
     widget: {
         ...AXPDonutChartWidget,
-        name: 'workflow-donut-chart',
-        title: createMultiLanguageString('Workflow Workload by Process', 'بار کاری گردش کار بر اساس فرایند'),
+        name: RootConfig.widgets.donutChart,
+        title: '@workflow-management:dashboard-widgets.workflow-donut-chart.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-donut-chart.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Workload by Process', 'بار کاری بر اساس فرایند'),
+            title: '@workflow-management:dashboard-widgets.workflow-donut-chart.chart-title',
             dataSource: RootConfig.dataSources.dashboardChart.workloadByProcess,
         },
     },
@@ -557,14 +687,15 @@ const AXMWorkflowOverloadedUsersBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-overloaded-users-bar',
-        title: createMultiLanguageString('Workflow Overloaded Users', 'کاربران با بار بیش از حد گردش کار'),
+        name: RootConfig.widgets.overloadedUsersBar,
+        title: '@workflow-management:dashboard-widgets.workflow-overloaded-users-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-overloaded-users-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Users above capacity threshold (active tasks)', 'کاربران بالاتر از آستانه ظرفیت (وظایف فعال)'),
-            xAxisLabel: createMultiLanguageString('User', 'کاربر'),
-            yAxisLabel: createMultiLanguageString('Active tasks', 'وظایف فعال'),
+            title: '@workflow-management:dashboard-widgets.workflow-overloaded-users-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-overloaded-users-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-overloaded-users-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.workloadOverloadedUsers,
         },
     },
@@ -574,14 +705,15 @@ const AXMWorkflowWorkloadPerUserActiveBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-workload-per-user-active-bar',
-        title: createMultiLanguageString('Workflow Workload per User (Active)', 'بار کاری گردش کار به ازای کاربر (فعال)'),
+        name: RootConfig.widgets.workloadPerUserActiveBar,
+        title: '@workflow-management:dashboard-widgets.workflow-workload-per-user-active-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-workload-per-user-active-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Active task count by user', 'تعداد وظایف فعال به ازای کاربر'),
-            xAxisLabel: createMultiLanguageString('User', 'کاربر'),
-            yAxisLabel: createMultiLanguageString('Active tasks', 'وظایف فعال'),
+            title: '@workflow-management:dashboard-widgets.workflow-workload-per-user-active-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-workload-per-user-active-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-workload-per-user-active-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.workloadPerUserActive,
         },
     },
@@ -591,14 +723,15 @@ const AXMWorkflowWorkloadPerUserAvgAgeBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-workload-per-user-avg-age-bar',
-        title: createMultiLanguageString('Workflow Avg Task Age per User', 'میانگین قدمت وظیفه به ازای کاربر'),
+        name: RootConfig.widgets.workloadPerUserAvgAgeBar,
+        title: '@workflow-management:dashboard-widgets.workflow-workload-per-user-avg-age-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-workload-per-user-avg-age-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Average age of active tasks (hours)', 'میانگین قدمت وظایف فعال (ساعت)'),
-            xAxisLabel: createMultiLanguageString('User', 'کاربر'),
-            yAxisLabel: createMultiLanguageString('Hours', 'ساعت'),
+            title: '@workflow-management:dashboard-widgets.workflow-workload-per-user-avg-age-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-workload-per-user-avg-age-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-workload-per-user-avg-age-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.workloadPerUserAvgAgeHours,
         },
     },
@@ -608,31 +741,100 @@ const AXMWorkflowWorkloadPerUserOverdueBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-workload-per-user-overdue-bar',
-        title: createMultiLanguageString('Workflow Workload per User (Overdue)', 'بار کاری گردش کار به ازای کاربر (معوقه)'),
+        name: RootConfig.widgets.workloadPerUserOverdueBar,
+        title: '@workflow-management:dashboard-widgets.workflow-workload-per-user-overdue-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-workload-per-user-overdue-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Overdue task count by user', 'تعداد وظایف معوقه به ازای کاربر'),
-            xAxisLabel: createMultiLanguageString('User', 'کاربر'),
-            yAxisLabel: createMultiLanguageString('Overdue tasks', 'وظایف معوقه'),
+            title: '@workflow-management:dashboard-widgets.workflow-workload-per-user-overdue-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-workload-per-user-overdue-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-workload-per-user-overdue-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.workloadPerUserOverdue,
         },
     },
 };
 
+const AXMWorkflowKpiDetailsAXPExtendedWidget = {
+    parentName: AXPKpiDetailsWidget.name,
+    widget: {
+        ...AXPKpiDetailsWidget,
+        name: RootConfig.widgets.kpiDetails,
+        title: '@workflow-management:dashboard-widgets.workflow-kpi-details.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-kpi-details.widget-description',
+        groups: [AXPWidgetGroupEnum.DashboardWidget],
+        categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
+        options: {
+            title: '@workflow-management:dashboard-widgets.workflow-kpi-details.options-title',
+            subtitle: '@workflow-management:dashboard-widgets.workflow-kpi-details.options-subtitle',
+            valueSuffix: '@workflow-management:dashboard-widgets.workflow-kpi-details.value-suffix',
+            dataSource: RootConfig.dataSources.dashboardKpi.throughputOverview,
+        },
+    },
+};
+
+const AXMWorkflowKpiProgressAXPExtendedWidget = {
+    parentName: AXPKpiProgressWidget.name,
+    widget: {
+        ...AXPKpiProgressWidget,
+        name: RootConfig.widgets.kpiProgress,
+        title: '@workflow-management:dashboard-widgets.workflow-kpi-progress.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-kpi-progress.widget-description',
+        groups: [AXPWidgetGroupEnum.DashboardWidget],
+        categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
+        options: {
+            subtitle: '@workflow-management:dashboard-widgets.workflow-kpi-progress.options-subtitle',
+            valueSuffix: '%',
+            targetValue: 95,
+            dataSource: RootConfig.dataSources.dashboardKpi.slaComplianceSnapshot,
+        },
+    },
+};
+
+const AXMWorkflowKpiSegmentedAXPExtendedWidget = {
+    parentName: AXPKpiSegmentedWidget.name,
+    widget: {
+        ...AXPKpiSegmentedWidget,
+        name: RootConfig.widgets.kpiSegmented,
+        title: '@workflow-management:dashboard-widgets.workflow-kpi-segmented.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-kpi-segmented.widget-description',
+        groups: [AXPWidgetGroupEnum.DashboardWidget],
+        categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
+        options: {
+            title: '@workflow-management:dashboard-widgets.workflow-kpi-segmented.options-title',
+            dataSource: RootConfig.dataSources.dashboardKpi.taskStatusBreakdown,
+        },
+    },
+};
+
+const AXMWorkflowKpiStatCardAXPExtendedWidget = {
+    parentName: AXPKpiStatCardWidget.name,
+    widget: {
+        ...AXPKpiStatCardWidget,
+        name: RootConfig.widgets.kpiStatCard,
+        title: '@workflow-management:dashboard-widgets.workflow-kpi-stat-card.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-kpi-stat-card.widget-description',
+        groups: [AXPWidgetGroupEnum.DashboardWidget],
+        categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
+        options: {
+            dataSource: RootConfig.dataSources.dashboardKpi.kpiStatCard,
+        },
+    },
+};
+
 const AXMWorkflowBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-bar-chart',
-        title: createMultiLanguageString('Workflow Pending Approvals by Age', 'تأییدهای در انتظار گردش کار بر اساس قدمت'),
+        name: RootConfig.widgets.barChart,
+        title: '@workflow-management:dashboard-widgets.workflow-bar-chart.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-bar-chart.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Pending Approvals by Age', 'تأییدهای در انتظار بر اساس قدمت'),
-            xAxisLabel: createMultiLanguageString('Age Bucket', 'بازه قدمت'),
-            yAxisLabel: createMultiLanguageString('Count', 'تعداد'),
+            title: '@workflow-management:dashboard-widgets.workflow-bar-chart.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-bar-chart.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-bar-chart.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.pendingApproval,
         },
     },
@@ -642,14 +844,15 @@ const AXMWorkflowTasksNearDeadlineBarChartAXPExtendedWidget = {
     parentName: AXPBarChartWidget.name,
     widget: {
         ...AXPBarChartWidget,
-        name: 'workflow-tasks-near-deadline-bar',
-        title: createMultiLanguageString('Workflow Tasks Near Deadline / SLA Risk', 'وظایف نزدیک مهلت / ریسک SLA'),
+        name: RootConfig.widgets.tasksNearDeadlineBar,
+        title: '@workflow-management:dashboard-widgets.workflow-tasks-near-deadline-bar.widget-title',
+        description: '@workflow-management:dashboard-widgets.workflow-tasks-near-deadline-bar.widget-description',
         groups: [AXPWidgetGroupEnum.DashboardWidget],
         categories: [AXP_WORKFLOW_DASHBOARD_WIDGET_CATEGORY],
         options: {
-            title: createMultiLanguageString('Remaining time to deadline (minutes)', 'زمان باقی‌مانده تا مهلت (دقیقه)'),
-            xAxisLabel: createMultiLanguageString('Task', 'وظیفه'),
-            yAxisLabel: createMultiLanguageString('Minutes left', 'دقیقه باقی‌مانده'),
+            title: '@workflow-management:dashboard-widgets.workflow-tasks-near-deadline-bar.chart-title',
+            xAxisLabel: '@workflow-management:dashboard-widgets.workflow-tasks-near-deadline-bar.x-axis-label',
+            yAxisLabel: '@workflow-management:dashboard-widgets.workflow-tasks-near-deadline-bar.y-axis-label',
             dataSource: RootConfig.dataSources.dashboardChart.tasksNearDeadline,
         },
     },
@@ -681,6 +884,12 @@ const WORKFLOW_DASHBOARD_EXTENDED_WIDGETS = [
     AXMWorkflowFailedProcessesByTypeDonutChartAXPExtendedWidget,
     AXMWorkflowStuckProcessesBarChartAXPExtendedWidget,
     AXMWorkflowErrorsBarChartAXPExtendedWidget,
+    AXMWorkflowErrorsHeatmapAXPExtendedWidget,
+    AXMWorkflowInstanceConversionFunnelAXPExtendedWidget,
+    AXMWorkflowKpiProgressAXPExtendedWidget,
+    AXMWorkflowKpiSegmentedAXPExtendedWidget,
+    AXMWorkflowKpiDetailsAXPExtendedWidget,
+    AXMWorkflowKpiStatCardAXPExtendedWidget,
 ];
 //#endregion
 //#region ----   Provider   ----
@@ -735,13 +944,13 @@ const AXMActivityCommandConfiguratorWidget = {
     ],
     components: {
         edit: {
-            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-BGUPxGXP.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
+            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-BYJpDQRs.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
         },
         designer: {
-            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-BGUPxGXP.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
+            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-BYJpDQRs.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-column.component-C8lgSjfc.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetColumnComponent),
+            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-column.component-CDo0QVFy.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetColumnComponent),
         },
     },
 };
@@ -1953,21 +2162,10 @@ class AXMWorkflowDefinitionProvider {
     }
     //#endregion
     //#region ----   AXPWorkflowProvider Implementation   ----
-    async getList(categoryId) {
-        // Same as report: filter by categoryIds array with 'contains'
+    async getList(_categoryId) {
         const result = await this.workflowDefinitionService.query({
             skip: 0,
             take: 1000,
-            filter: {
-                logic: 'and',
-                filters: [{
-                        field: 'categoryIds',
-                        operator: {
-                            type: 'contains',
-                        },
-                        value: categoryId,
-                    }]
-            }
         });
         // Convert entity data to workflow definition format
         return (result.items || []).map((item) => ({
@@ -2053,6 +2251,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Injectable
         }] });
 
+//#region ---- Imports ----
+//#endregion
+//#region ---- Workflow definition lifecycle status ----
+/**
+ * Publication lifecycle for workflow definitions: draft, review, published, archived.
+ */
+class AXMWorkflowDefinitionStatusProvider extends AXPStatusProvider {
+    constructor() {
+        super(...arguments);
+        this.key = 'workflow-management.status.workflow-definition';
+        this.defaultStatus = AXPSystemStatusType.Draft;
+        this.statuses = [
+            systemStatusToDefinition(AXPSystemStatusType.Draft, {
+                generateView: true,
+            }),
+            systemStatusToDefinition(AXPSystemStatusType.PendingReview, {
+                generateView: true,
+            }),
+            systemStatusToDefinition(AXPSystemStatusType.Published, {
+                generateView: true,
+            }),
+            systemStatusToDefinition(AXPSystemStatusType.Archived, {
+                generateView: false,
+            }),
+        ];
+        this.transitions = [
+            {
+                from: AXPSystemStatusType.Draft,
+                to: AXPSystemStatusType.PendingReview,
+                title: '@workflow-management:workflow-definitions.entities.workflow-definition.status.transitions.submit-review',
+            },
+            {
+                from: AXPSystemStatusType.Draft,
+                to: AXPSystemStatusType.Published,
+                title: '@workflow-management:workflow-definitions.entities.workflow-definition.status.transitions.publish-direct',
+            },
+            {
+                from: AXPSystemStatusType.PendingReview,
+                to: AXPSystemStatusType.Published,
+                title: '@workflow-management:workflow-definitions.entities.workflow-definition.status.transitions.publish',
+            },
+            {
+                from: AXPSystemStatusType.PendingReview,
+                to: AXPSystemStatusType.Draft,
+                title: '@workflow-management:workflow-definitions.entities.workflow-definition.status.transitions.revise',
+            },
+            {
+                from: AXPSystemStatusType.Published,
+                to: AXPSystemStatusType.Draft,
+                title: '@workflow-management:workflow-definitions.entities.workflow-definition.status.transitions.unpublish',
+            },
+            {
+                from: AXPSystemStatusType.Published,
+                to: AXPSystemStatusType.Archived,
+                title: '@workflow-management:workflow-definitions.entities.workflow-definition.status.transitions.archive',
+            },
+            {
+                from: AXPSystemStatusType.Draft,
+                to: AXPSystemStatusType.Archived,
+                title: '@workflow-management:workflow-definitions.entities.workflow-definition.status.transitions.archive',
+            },
+        ];
+    }
+}
+//#endregion
+
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Manifest Definition   ----
@@ -2516,7 +2780,7 @@ class AXPGenericWorkflowTaskProvider extends AXPWorkflowTaskProvider {
     //#endregion
     //#region ----   Component   ----
     getComponent() {
-        return () => import('./acorex-modules-workflow-management-workflow-task-popover.component-CIakASVR.mjs').then((m) => m.AXMWorkflowTaskPopoverComponent);
+        return () => import('./acorex-modules-workflow-management-workflow-task-popover.component-NpUx0sB5.mjs').then((m) => m.AXMWorkflowTaskPopoverComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGenericWorkflowTaskProvider, deps: [{ token: AXP_GENERIC_WORKFLOW_TASK_PROVIDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGenericWorkflowTaskProvider }); }
@@ -2536,6 +2800,7 @@ function provideTaskWorkflow() {
             useFactory: (injector) => {
                 return (async () => {
                     const workflowDefinitionService = injector.get(AXPWorkflowDefinitionService);
+                    const multiLanguageResolver = injector.get(AXTranslationService);
                     const categories = await workflowDefinitionService.getCategories();
                     const providers = [];
                     for (const category of categories) {
@@ -2543,7 +2808,7 @@ function provideTaskWorkflow() {
                         for (const workflow of workflows) {
                             const provider = runInInjectionContext(injector, () => new AXPGenericWorkflowTaskProvider({
                                 name: workflow.name,
-                                title: workflow.title ?? workflow.name,
+                                title: multiLanguageResolver.resolve(workflow.title) ?? workflow.name,
                                 icon: 'fa-light fa-diagram-project',
                                 definitionId: workflow.name,
                             }));
@@ -2594,13 +2859,21 @@ class AXMWorkflowManagementModule {
                 useFactory: routesFactory,
             },
             provideCommandSetups([
+                {
+                    key: 'WorkflowManagement.WorkflowDefinition:ExecuteWithInput',
+                    command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowWithInputCommand),
+                },
                 {
                     key: 'WorkflowManagement.WorkflowDefinition:Execute',
-                    command: () => import('./acorex-modules-workflow-management-index-DWIDQsWq.mjs').then((c) => c.ExecuteWorkflowCommand),
+                    command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowCommand),
                 },
                 {
                     key: 'WorkflowManagement.WorkflowDefinition:EditInStudio',
-                    command: () => import('./acorex-modules-workflow-management-index-DWIDQsWq.mjs').then((c) => c.EditInStudioCommand),
+                    command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.EditInStudioCommand),
+                },
+                {
+                    key: 'WorkflowManagement.WorkflowDefinition:Activities:Save',
+                    command: () => import('./acorex-modules-workflow-management-save-workflow-definition-activities.command-fFO152ni.mjs').then((c) => c.SaveWorkflowDefinitionActivitiesCommand),
                 },
                 {
                     key: 'workflow-activity:show-toast',
@@ -2638,6 +2911,8 @@ class AXMWorkflowManagementModule {
                 useClass: AXMWorkflowManagementModuleEntityProvider,
                 multi: true,
             },
+            provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-DMnJRDbq.mjs').then((m) => m.AXMWorkflowInstanceActivityInstancesPageComponentProvider)),
+            provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-D8fjNgQJ.mjs').then((m) => m.AXMWorkflowDefinitionActivitiesPageComponentProvider)),
             // Automation condition builder: default automation.rules(refType, refId); modules override for their refTypes
             {
                 provide: AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER,
@@ -2645,6 +2920,11 @@ class AXMWorkflowManagementModule {
                 multi: true,
             },
             // Menu Provider
+            {
+                provide: AXP_STATUS_PROVIDERS,
+                useClass: AXMWorkflowDefinitionStatusProvider,
+                multi: true,
+            },
             {
                 provide: AXP_MENU_PROVIDER,
                 useClass: AXMMenuProvider,
@@ -2742,13 +3022,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useFactory: routesFactory,
                         },
                         provideCommandSetups([
+                            {
+                                key: 'WorkflowManagement.WorkflowDefinition:ExecuteWithInput',
+                                command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowWithInputCommand),
+                            },
                             {
                                 key: 'WorkflowManagement.WorkflowDefinition:Execute',
-                                command: () => import('./acorex-modules-workflow-management-index-DWIDQsWq.mjs').then((c) => c.ExecuteWorkflowCommand),
+                                command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowCommand),
                             },
                             {
                                 key: 'WorkflowManagement.WorkflowDefinition:EditInStudio',
-                                command: () => import('./acorex-modules-workflow-management-index-DWIDQsWq.mjs').then((c) => c.EditInStudioCommand),
+                                command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.EditInStudioCommand),
+                            },
+                            {
+                                key: 'WorkflowManagement.WorkflowDefinition:Activities:Save',
+                                command: () => import('./acorex-modules-workflow-management-save-workflow-definition-activities.command-fFO152ni.mjs').then((c) => c.SaveWorkflowDefinitionActivitiesCommand),
                             },
                             {
                                 key: 'workflow-activity:show-toast',
@@ -2786,6 +3074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useClass: AXMWorkflowManagementModuleEntityProvider,
                             multi: true,
                         },
+                        provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-DMnJRDbq.mjs').then((m) => m.AXMWorkflowInstanceActivityInstancesPageComponentProvider)),
+                        provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-D8fjNgQJ.mjs').then((m) => m.AXMWorkflowDefinitionActivitiesPageComponentProvider)),
                         // Automation condition builder: default automation.rules(refType, refId); modules override for their refTypes
                         {
                             provide: AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER,
@@ -2793,6 +3083,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             multi: true,
                         },
                         // Menu Provider
+                        {
+                            provide: AXP_STATUS_PROVIDERS,
+                            useClass: AXMWorkflowDefinitionStatusProvider,
+                            multi: true,
+                        },
                         {
                             provide: AXP_MENU_PROVIDER,
                             useClass: AXMMenuProvider,
@@ -2883,7 +3178,7 @@ class AXMActivityCategoriesTreeComponent {
     constructor() {
         //#region ----   Services & Dependencies   ----
         this.activityDefinitionService = inject(AXPActivityDefinitionService);
-        this.multiLanguageResolver = inject(AXPMultiLanguageStringResolverService);
+        this.multiLanguageResolver = inject(AXTranslationService);
         //#endregion
         //#region ----   Output Events   ----
         this.categoryClick = output();
@@ -2910,7 +3205,7 @@ class AXMActivityCategoriesTreeComponent {
                 const activities = await this.activityDefinitionService.getActivitiesByCategoryId(parentId);
                 const definitionItems = activities.map((item) => ({
                     id: `activity_${item.type ?? item.name}`,
-                    title: item.title ?? item.name ?? item.type ?? '',
+                    title: this.multiLanguageResolver.resolve(item.title) || item.name || item.type || '',
                     hasChild: false,
                     item,
                     type: 'definition',
@@ -3014,7 +3309,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 this.cachedPropertyViewerTabs.set([]);
                 return;
             }
-            const structKey = `${node.id}:${node.type}:${(def?.inputs?.length ?? 0)}`;
+            const structKey = `${node.id}:${node.type}:${def?.inputs?.length ?? 0}`;
             if (this.lastPropertyViewerStructKey === structKey)
                 return;
             this.lastPropertyViewerStructKey = structKey;
@@ -3054,7 +3349,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             isLatest: true,
             isPublished: false,
             toolVersion: '1.0.0',
-            providerName: 'WorkflowStudio'
+            providerName: 'WorkflowStudio',
         }, ...(ngDevMode ? [{ debugName: "workflowSettings" }] : /* istanbul ignore next */ []));
         /** Data source for variable type select (settings modal). */
         this.variableTypeOptions = [
@@ -3062,7 +3357,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             { value: 'number', label: 'Number' },
             { value: 'boolean', label: 'Boolean' },
             { value: 'object', label: 'Object' },
-            { value: 'array', label: 'Array' }
+            { value: 'array', label: 'Array' },
         ];
         // Canvas state
         this.canvasOffset = { x: 0, y: 0 };
@@ -3104,9 +3399,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         }
         await this.loadWorkflowByName(workflowName);
         // Subscribe to query param changes (like drive component)
-        this.activatedRoute.queryParams
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(async (params) => {
+        this.activatedRoute.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(async (params) => {
             const newWorkflowName = params['workflow'];
             if (newWorkflowName && newWorkflowName !== workflowName) {
                 await this.loadWorkflowByName(newWorkflowName);
@@ -3126,6 +3419,30 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         const value = ev.target.value;
         this.workflowJson.set(value);
     }
+    //#region ---- Workflow definition display (multi-language) ----
+    /**
+     * Resolves workflow definition title for studio UI strings (settings, graph root label).
+     */
+    resolveWorkflowDefinitionTitle(workflowDef) {
+        const raw = workflowDef.title;
+        if (raw == null || raw === '') {
+            return workflowDef.name || 'Root';
+        }
+        return typeof raw === 'string'
+            ? raw
+            : (this.translationService.resolve(raw) ?? workflowDef.name ?? 'Root');
+    }
+    /**
+     * Resolves workflow definition description for studio settings (current locale string).
+     */
+    resolveWorkflowDefinitionDescription(workflowDef) {
+        const raw = workflowDef.description;
+        if (raw == null || raw === '') {
+            return '';
+        }
+        return typeof raw === 'string' ? raw : (this.translationService.resolve(raw) ?? '');
+    }
+    //#endregion
     /**
      * Load workflow by name
      */
@@ -3133,18 +3450,22 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         try {
             this.addLog('info', `Loading workflow: ${workflowName}...`);
             // Try to get workflow from entity service first
-            const workflowEntityService = this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name).data();
+            const workflowEntityService = this.entityService
+                .withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name)
+                .data();
             const result = await workflowEntityService.query({
                 skip: 0,
                 take: 1,
                 filter: {
                     logic: 'and',
-                    filters: [{
+                    filters: [
+                        {
                             field: 'name',
                             operator: { type: 'equal' },
                             value: workflowName,
-                        }]
-                }
+                        },
+                    ],
+                },
             });
             let workflowDef = null;
             if (result.items && result.items.length > 0) {
@@ -3165,27 +3486,16 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             this.workflowSettings.set({
                 definitionId: workflowDef.id || workflowDef.definitionId || workflowDef.name,
                 name: workflowDef.name || '',
-                description: workflowDef.description || '',
-                inputs: (workflowDef.inputs || []).map((input) => ({
-                    name: input.name,
-                    title: input.title || input.name,
-                    description: input.description,
-                    schema: input.schema || { dataType: 'string' },
-                    validations: input.validations,
-                })),
-                outputs: (workflowDef.outputs || []).map((output) => ({
-                    name: output.name,
-                    title: output.title || output.name,
-                    description: output.description,
-                    schema: output.schema || { dataType: 'string' },
-                })),
+                description: this.resolveWorkflowDefinitionDescription(workflowDef),
+                inputs: (workflowDef.inputs || []).map((input) => this.mapDefinitionInputToWorkflowInput(input)),
+                outputs: (workflowDef.outputs || []).map((output) => this.mapDefinitionOutputToWorkflowOutput(output)),
                 variables: workflowDef.variables || [],
                 outcomes: workflowDef.outcomes || ['Done'],
                 usableAsActivity: workflowDef.extensions?.elsa?.options?.usableAsActivity || false,
                 autoUpdateConsumingWorkflows: workflowDef.extensions?.elsa?.options?.autoUpdateConsumingWorkflows || false,
                 version: workflowDef.version || 1,
                 isLatest: workflowDef.isLatest !== undefined ? workflowDef.isLatest : true,
-                isPublished: workflowDef.isPublished || false,
+                isPublished: workflowDef.statusId === AXPSystemStatusType.Published,
                 toolVersion: workflowDef.toolVersion || '1.0.0',
                 providerName: workflowDef.providerName || 'ACoreX',
             });
@@ -3213,7 +3523,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         const rootActivity = {
             id: graph.startActivityId || 'root',
             type: 'workflow-activity:sequence',
-            name: workflowDef.title || workflowDef.name || 'Root',
+            name: this.resolveWorkflowDefinitionTitle(workflowDef),
             children: [],
         };
         // Convert activities to children
@@ -3260,7 +3570,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         return {
             id: workflowDef.id || workflowDef.name || 'workflow',
             name: workflowDef.name || '',
-            description: workflowDef.description || '',
+            description: this.resolveWorkflowDefinitionDescription(workflowDef),
             version: workflowDef.version || 1,
             root: rootActivity,
         };
@@ -3366,16 +3676,85 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
     /**
      * Convert AXPActivityDefinition to ActivityInfo
      */
+    mapDefinitionInputToWorkflowInput(input) {
+        const titleRaw = input.title ?? input.name;
+        const titleStr = typeof titleRaw === 'string' ? titleRaw : (this.translationService.resolve(titleRaw) ?? String(input.name));
+        const descRaw = input.description;
+        const descStr = descRaw == null ? undefined : typeof descRaw === 'string' ? descRaw : this.translationService.resolve(descRaw);
+        if (input.dataType != null && input.interface != null) {
+            return {
+                name: input.name,
+                title: titleStr,
+                description: descStr,
+                schema: {
+                    dataType: input.dataType,
+                    interface: input.interface,
+                },
+                validations: input.validations,
+            };
+        }
+        if (input.schema) {
+            return {
+                name: input.name,
+                title: titleStr,
+                description: descStr,
+                schema: input.schema,
+                validations: input.validations,
+            };
+        }
+        return {
+            name: input.name,
+            title: input.name,
+            description: descStr,
+            schema: { dataType: input.typeName || 'string', defaultValue: input.defaultValue },
+            validations: input.isRequired ? [{ rule: 'required' }] : undefined,
+        };
+    }
+    mapDefinitionOutputToWorkflowOutput(output) {
+        const titleRaw = output.title ?? output.name;
+        const titleStr = typeof titleRaw === 'string' ? titleRaw : (this.translationService.resolve(titleRaw) ?? String(output.name));
+        const descStr = output.description == null
+            ? undefined
+            : typeof output.description === 'string'
+                ? output.description
+                : this.translationService.resolve(output.description);
+        if (output.dataType != null && output.interface != null) {
+            return {
+                name: output.name,
+                title: titleStr,
+                description: descStr,
+                schema: { dataType: output.dataType, interface: output.interface },
+                path: output.path,
+                metadata: output.metadata,
+            };
+        }
+        if (output.schema) {
+            return {
+                name: output.name,
+                title: titleStr,
+                description: descStr,
+                schema: output.schema,
+                path: output.path,
+                metadata: output.metadata,
+            };
+        }
+        return {
+            name: output.name,
+            title: titleStr,
+            description: descStr,
+            schema: { dataType: output.typeName || 'string' },
+        };
+    }
     convertActivityDefinitionToInfo(activity) {
-        const properties = (activity.inputs || []).map(input => ({
+        const properties = (activity.inputs || []).map((input) => ({
             name: input.name,
-            type: this.getPropertyTypeFromSchema(input.schema),
-            required: !input.schema.nullable,
-            description: input.description,
-            defaultValue: input.schema.defaultValue
+            type: this.getPropertyTypeFromDataType(input.dataType),
+            required: !!input.validations?.some((v) => v.rule === 'required'),
+            description: this.translationService.resolve(input.description) ?? undefined,
+            defaultValue: undefined,
         }));
         const defaultProperties = {};
-        properties.forEach(prop => {
+        properties.forEach((prop) => {
             if (prop.defaultValue !== undefined) {
                 defaultProperties[prop.name] = prop.defaultValue;
             }
@@ -3383,10 +3762,10 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         return {
             type: activity.type,
             name: activity.name,
-            description: activity.description || '',
+            description: this.translationService.resolve(activity.description) || '',
             icon: this.normalizeActivityIcon(activity.icon),
             properties,
-            defaultProperties
+            defaultProperties,
         };
     }
     /**
@@ -3400,10 +3779,9 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         return hasStylePrefix ? trimmed : `fa-light ${trimmed}`;
     }
     /**
-     * Get property type from schema
+     * Map {@link AXPProperty.dataType} to visual editor property type.
      */
-    getPropertyTypeFromSchema(schema) {
-        const dataType = schema?.dataType || 'string';
+    getPropertyTypeFromDataType(dataType) {
         if (dataType === 'array')
             return 'array';
         if (dataType === 'object')
@@ -3412,6 +3790,8 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             return 'boolean';
         if (dataType === 'number' || dataType === 'integer')
             return 'number';
+        if (dataType === 'blob')
+            return 'any';
         return 'string';
     }
     /**
@@ -3422,10 +3802,10 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             'workflow-markers': '#10B981',
             'control-flow': '#3B82F6',
             'user-interaction': '#8B5CF6',
-            'data': '#10B981',
-            'navigation': '#F59E0B',
-            'events': '#EF4444',
-            'http': '#06B6D4'
+            data: '#10B981',
+            navigation: '#F59E0B',
+            events: '#EF4444',
+            http: '#06B6D4',
         };
         return colorMap[categoryId] || '#64748B';
     }
@@ -3442,8 +3822,8 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 id: 'root',
                 type: 'workflow-activity:sequence',
                 name: 'Root',
-                children: []
-            }
+                children: [],
+            },
         }, null, 2);
     }
     //#endregion
@@ -3490,7 +3870,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         this.workflowInstanceState.set({
             status: 'running',
             startTime: new Date(),
-            currentState: null
+            currentState: null,
         });
         this.addLog('info', 'شروع اجرای Workflow...');
         try {
@@ -3506,12 +3886,21 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             }
             // Save or update workflow definition
             try {
-                const existing = await this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name).data().byKey(workflowId);
+                const existing = await this.entityService
+                    .withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name)
+                    .data()
+                    .byKey(workflowId);
                 if (existing) {
-                    await this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name).data().update(workflowId, definitionToSave);
+                    await this.entityService
+                        .withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name)
+                        .data()
+                        .update(workflowId, definitionToSave);
                 }
                 else {
-                    await this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name).data().create({ ...definitionToSave, id: workflowId });
+                    await this.entityService
+                        .withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name)
+                        .data()
+                        .create({ ...definitionToSave, id: workflowId });
                 }
                 const saveMessage = await this.translationService.translateAsync('@workflow-management:test-pages.messages.success.workflow-saved');
                 this.addLog('success', saveMessage);
@@ -3568,7 +3957,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                     currentResult = {
                         ...currentResult,
                         success: false,
-                        error: error.message || 'Task execution failed'
+                        error: error.message || 'Task execution failed',
                     };
                     break;
                 }
@@ -3580,7 +3969,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 startTime: this.workflowInstanceState().startTime || new Date(),
                 endTime: new Date(),
                 result: currentResult,
-                currentState: currentResult.state?.output?.['taskStatus'] || currentResult.state?.output?.['currentState']
+                currentState: currentResult.state?.output?.['taskStatus'] || currentResult.state?.output?.['currentState'],
             });
             if (currentResult.success) {
                 this.addLog('success', `✅ Workflow با موفقیت اجرا شد! (${taskCount} task(s) executed)`, currentResult);
@@ -3594,7 +3983,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             this.workflowInstanceState.set({
                 status: 'error',
                 error: error.message,
-                startTime: this.workflowInstanceState().startTime
+                startTime: this.workflowInstanceState().startTime,
             });
         }
         finally {
@@ -3610,7 +3999,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             timestamp: new Date(),
             level,
             message,
-            data
+            data,
         });
         this.executionLogs.set([...logs]);
     }
@@ -3622,7 +4011,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             id: `${activity.type.toLowerCase()}-${Date.now()}`,
             type: activity.type,
             name: activity.name,
-            properties: {}
+            properties: {},
         };
         // کپی در کلیپ‌بورد
         navigator.clipboard.writeText(JSON.stringify(template, null, 2));
@@ -3661,107 +4050,107 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             usableAsActivity: settings.usableAsActivity,
             autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows,
             toolVersion: settings.toolVersion ?? '1.0.0',
-            providerName: settings.providerName ?? 'WorkflowStudio'
+            providerName: settings.providerName ?? 'WorkflowStudio',
         };
         this.layoutBuilder
             .create()
-            .dialog(dialog => {
+            .dialog((dialog) => {
             dialog
                 .setTitle('@workflow-management:workflow-studio.settings.title')
                 .setSize('lg')
                 .setCloseButton(true)
                 .setContext(dialogContext)
-                .content(flex => {
+                .content((flex) => {
                 flex
                     .setDirection('column')
                     .setGap('12px')
-                    .fieldset(general => {
+                    .fieldset((general) => {
                     general
                         .setTitle('@workflow-management:workflow-studio.settings.tabs.general')
-                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.name.title', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.name.title', (field) => {
                         field.path('name');
                         field.textBox({
-                            placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.name.placeholder'
+                            placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.name.placeholder',
                         });
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.title', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.title', (field) => {
                         field.path('definitionId');
                         field.textBox({
-                            placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.placeholder'
+                            placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.placeholder',
                         });
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.description.title', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.description.title', (field) => {
                         field.path('description');
                         field.largeTextBox({
                             placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.description.placeholder',
-                            rows: 4
+                            rows: 4,
                         });
                     });
                 })
-                    .fieldset(inputs => {
+                    .fieldset((inputs) => {
                     inputs
                         .setTitle('@workflow-management:workflow-studio.settings.tabs.inputs')
-                        .formField('@workflow-management:workflow-studio.settings.sections.inputs.fields.inputs-json', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.inputs.fields.inputs-json', (field) => {
                         field.path('inputsJson');
                         field.largeTextBox({ rows: 12 });
                     });
                 })
-                    .fieldset(outputs => {
+                    .fieldset((outputs) => {
                     outputs
                         .setTitle('@workflow-management:workflow-studio.settings.tabs.outputs')
-                        .formField('@workflow-management:workflow-studio.settings.sections.outputs.fields.outputs-json', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.outputs.fields.outputs-json', (field) => {
                         field.path('outputsJson');
                         field.largeTextBox({ rows: 12 });
                     });
                 })
-                    .fieldset(variables => {
+                    .fieldset((variables) => {
                     variables
                         .setTitle('@workflow-management:workflow-studio.settings.tabs.variables')
-                        .formField('@workflow-management:workflow-studio.settings.sections.variables.fields.variables-json', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.variables.fields.variables-json', (field) => {
                         field.path('variablesJson');
                         field.largeTextBox({ rows: 12 });
                     });
                 })
-                    .fieldset(advanced => {
+                    .fieldset((advanced) => {
                     advanced
                         .setTitle('@workflow-management:workflow-studio.settings.tabs.advanced')
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.version', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.version', (field) => {
                         field.path('version');
                         field.numberBox({ min: 1 });
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.is-latest', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.is-latest', (field) => {
                         field.path('isLatest');
                         field.toggleSwitch();
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.is-published', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.is-published', (field) => {
                         field.path('isPublished');
                         field.toggleSwitch();
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.usable-as-activity', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.usable-as-activity', (field) => {
                         field.path('usableAsActivity');
                         field.toggleSwitch();
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.auto-update-consuming', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.auto-update-consuming', (field) => {
                         field.path('autoUpdateConsumingWorkflows');
                         field.toggleSwitch();
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.tool-version', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.tool-version', (field) => {
                         field.path('toolVersion');
                         field.textBox({ placeholder: '1.0.0' });
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.provider-name', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.provider-name', (field) => {
                         field.path('providerName');
                         field.textBox({ placeholder: 'WorkflowStudio' });
                     })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.outcomes-label', field => {
+                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.outcomes-label', (field) => {
                         field.path('outcomesJson');
                         field.textBox({
-                            placeholder: '@workflow-management:workflow-studio.settings.sections.advanced.fields.outcomes-placeholder'
+                            placeholder: '@workflow-management:workflow-studio.settings.sections.advanced.fields.outcomes-placeholder',
                         });
                     });
                 });
             })
-                .setActions(actions => {
+                .setActions((actions) => {
                 actions
                     .cancel('@workflow-management:workflow-studio.settings.actions.cancel')
                     .submit('@workflow-management:workflow-studio.settings.actions.save');
@@ -3802,7 +4191,10 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                     this.addLog('error', 'Invalid variables JSON');
                 }
                 if (typeof ctx.outcomesJson === 'string' && ctx.outcomesJson.trim()) {
-                    outcomes = ctx.outcomesJson.split(',').map((s) => s.trim()).filter(Boolean);
+                    outcomes = ctx.outcomesJson
+                        .split(',')
+                        .map((s) => s.trim())
+                        .filter(Boolean);
                 }
                 if (outcomes.length === 0)
                     outcomes = ['Done'];
@@ -3820,7 +4212,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                     usableAsActivity: Boolean(ctx.usableAsActivity),
                     autoUpdateConsumingWorkflows: Boolean(ctx.autoUpdateConsumingWorkflows),
                     toolVersion: String(ctx.toolVersion ?? '1.0.0'),
-                    providerName: String(ctx.providerName ?? 'WorkflowStudio')
+                    providerName: String(ctx.providerName ?? 'WorkflowStudio'),
                 };
                 this.workflowSettings.set(newSettings);
                 this.applyWorkflowSettingsToJson();
@@ -3834,49 +4226,12 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
     syncWorkflowSettingsFromJson() {
         try {
             const workflow = JSON.parse(this.workflowJson());
-            const convertInput = (input) => {
-                if (input.schema) {
-                    return {
-                        name: input.name,
-                        title: input.title || input.name,
-                        description: input.description,
-                        schema: input.schema,
-                        validations: input.validations
-                    };
-                }
-                return {
-                    name: input.name,
-                    title: input.name,
-                    description: input.description,
-                    schema: {
-                        dataType: input.typeName || 'string',
-                        defaultValue: input.defaultValue
-                    },
-                    validations: input.isRequired ? [{ rule: 'required' }] : undefined
-                };
-            };
-            const convertOutput = (output) => {
-                if (output.schema) {
-                    return {
-                        name: output.name,
-                        title: output.title || output.name,
-                        description: output.description,
-                        schema: output.schema
-                    };
-                }
-                return {
-                    name: output.name,
-                    title: output.title || output.name,
-                    description: output.description,
-                    schema: { dataType: output.typeName || 'string' }
-                };
-            };
             this.workflowSettings.set({
                 definitionId: workflow.definitionId || workflow.id || '',
                 name: workflow.name || '',
-                description: workflow.description || '',
-                inputs: (workflow.inputs || []).map(convertInput),
-                outputs: (workflow.outputs || []).map(convertOutput),
+                description: this.resolveWorkflowDefinitionDescription(workflow),
+                inputs: (workflow.inputs || []).map((input) => this.mapDefinitionInputToWorkflowInput(input)),
+                outputs: (workflow.outputs || []).map((output) => this.mapDefinitionOutputToWorkflowOutput(output)),
                 variables: workflow.variables || [],
                 outcomes: workflow.outcomes || ['Done'],
                 usableAsActivity: workflow.options?.usableAsActivity || false,
@@ -3885,7 +4240,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 isLatest: workflow.isLatest !== undefined ? workflow.isLatest : true,
                 isPublished: workflow.isPublished || false,
                 toolVersion: workflow.toolVersion || '1.0.0',
-                providerName: workflow.providerName || 'WorkflowStudio'
+                providerName: workflow.providerName || 'WorkflowStudio',
             });
         }
         catch {
@@ -3903,7 +4258,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 isLatest: true,
                 isPublished: false,
                 toolVersion: '1.0.0',
-                providerName: 'WorkflowStudio'
+                providerName: 'WorkflowStudio',
             });
         }
     }
@@ -3924,33 +4279,31 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             workflow.providerName = settings.providerName;
             workflow.options = {
                 usableAsActivity: settings.usableAsActivity,
-                autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows
+                autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows,
             };
-            workflow.variables = settings.variables.map(v => ({
+            workflow.variables = settings.variables.map((v) => ({
                 id: v.name,
                 name: v.name,
                 typeName: v.typeName,
                 value: v.value,
-                storageDriverType: 'Memory'
+                storageDriverType: 'Memory',
             }));
-            workflow.inputs = settings.inputs.map(i => ({
+            workflow.inputs = settings.inputs.map((i) => ({
                 name: i.name,
                 title: i.title,
                 description: i.description,
-                schema: {
-                    dataType: i.schema.dataType,
-                    nullable: i.schema.nullable,
-                    readonly: i.schema.readonly,
-                    hidden: i.schema.hidden,
-                    defaultValue: i.schema.defaultValue
-                },
-                validations: i.validations
+                dataType: i.schema.dataType,
+                interface: i.schema.interface ?? { type: 'text-editor', options: {} },
+                validations: i.validations,
             }));
-            workflow.outputs = settings.outputs.map(o => ({
+            workflow.outputs = settings.outputs.map((o) => ({
                 name: o.name,
                 title: o.title,
                 description: o.description,
-                schema: { dataType: o.schema.dataType }
+                dataType: o.schema.dataType,
+                interface: o.schema.interface ?? { type: 'text-editor', options: {} },
+                path: o.path,
+                metadata: o.metadata,
             }));
             workflow.outcomes = settings.outcomes;
             workflow.customProperties = workflow.customProperties || {};
@@ -3981,50 +4334,46 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 // Identification fields
                 definitionId: settings.definitionId || workflow.id || this.generateId(),
                 name: settings.name || workflow.name || 'Untitled Workflow',
-                description: settings.description || workflow.description || '',
+                description: settings.description || this.resolveWorkflowDefinitionDescription(workflow),
                 toolVersion: settings.toolVersion || '3.0.0',
                 // Materialization fields
                 providerName: settings.providerName || 'ACoreX',
                 materializerContext: {
                     materializerName: 'Json',
                     // Store the root activity as JSON string
-                    stringData: JSON.stringify(workflow.root)
+                    stringData: JSON.stringify(workflow.root),
                 },
                 // WorkflowCommon fields
                 options: {
                     usableAsActivity: settings.usableAsActivity || false,
-                    autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows || false
+                    autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows || false,
                 },
                 // Variables array
-                variables: settings.variables.map(v => ({
+                variables: settings.variables.map((v) => ({
                     id: v.name,
                     name: v.name,
                     typeName: v.typeName,
                     value: v.value,
-                    storageDriverType: 'Memory'
+                    storageDriverType: 'Memory',
                 })),
-                // Inputs array
-                inputs: settings.inputs.map(i => ({
+                // Inputs array (aligned with {@link AXPProperty})
+                inputs: settings.inputs.map((i) => ({
                     name: i.name,
                     title: i.title,
                     description: i.description,
-                    schema: {
-                        dataType: i.schema.dataType,
-                        nullable: i.schema.nullable,
-                        readonly: i.schema.readonly,
-                        hidden: i.schema.hidden,
-                        defaultValue: i.schema.defaultValue
-                    },
-                    validations: i.validations || []
+                    dataType: i.schema.dataType,
+                    interface: i.schema.interface ?? { type: 'text-editor', options: {} },
+                    validations: i.validations || [],
                 })),
-                // Outputs array
-                outputs: settings.outputs.map(o => ({
+                // Outputs array (aligned with {@link AXPWorkflowOutputProperty})
+                outputs: settings.outputs.map((o) => ({
                     name: o.name,
                     title: o.title,
                     description: o.description,
-                    schema: {
-                        dataType: o.schema.dataType
-                    }
+                    dataType: o.schema.dataType,
+                    interface: o.schema.interface ?? { type: 'text-editor', options: {} },
+                    path: o.path,
+                    metadata: o.metadata,
                 })),
                 // Outcomes array
                 outcomes: settings.outcomes || ['Done'],
@@ -4034,7 +4383,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 isReadonly: false,
                 isSystem: false,
                 // Root activity (direct reference for Elsa compatibility)
-                root: workflow.root
+                root: workflow.root,
             };
             return definition;
         }
@@ -4071,9 +4420,10 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             description: '',
             schema: {
                 dataType: 'string',
-                defaultValue: undefined
+                defaultValue: undefined,
+                interface: { type: 'text-editor', options: {} },
             },
-            validations: undefined
+            validations: undefined,
         });
         this.workflowSettings.set({ ...settings });
     }
@@ -4093,7 +4443,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             // For nested schema properties like 'schema.dataType'
             const schemaField = field.replace('schema.', '');
             if (!input.schema) {
-                input.schema = { dataType: 'string' };
+                input.schema = { dataType: 'string', interface: { type: 'text-editor', options: {} } };
             }
             input.schema[schemaField] = value;
         }
@@ -4106,7 +4456,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         const settings = this.workflowSettings();
         const input = settings.inputs[index];
         if (!input.schema) {
-            input.schema = { dataType: 'string' };
+            input.schema = { dataType: 'string', interface: { type: 'text-editor', options: {} } };
         }
         input.schema[schemaField] = value;
         this.workflowSettings.set({ ...settings });
@@ -4118,12 +4468,12 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             if (!input.validations) {
                 input.validations = [];
             }
-            if (!input.validations.some(v => v.rule === 'required')) {
+            if (!input.validations.some((v) => v.rule === 'required')) {
                 input.validations.push({ rule: 'required' });
             }
         }
         else {
-            input.validations = input.validations?.filter(v => v.rule !== 'required');
+            input.validations = input.validations?.filter((v) => v.rule !== 'required');
             if (input.validations?.length === 0) {
                 input.validations = undefined;
             }
@@ -4131,7 +4481,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         this.workflowSettings.set({ ...settings });
     }
     getInputIsRequired(input) {
-        return input.validations?.some(v => v.rule === 'required') ?? false;
+        return input.validations?.some((v) => v.rule === 'required') ?? false;
     }
     // ============ Workflow Outputs Management ============
     addWorkflowOutput() {
@@ -4141,8 +4491,8 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             title: `Output ${settings.outputs.length + 1}`,
             description: '',
             schema: {
-                dataType: 'string'
-            }
+                dataType: 'string',
+            },
         });
         this.workflowSettings.set({ ...settings });
     }
@@ -4183,7 +4533,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             name: `variable${settings.variables.length + 1}`,
             typeName: 'string',
             value: '',
-            description: ''
+            description: '',
         });
         this.workflowSettings.set({ ...settings });
     }
@@ -4204,8 +4554,8 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         const settings = this.workflowSettings();
         settings.outcomes = outcomesString
             .split(',')
-            .map(o => o.trim())
-            .filter(o => o.length > 0);
+            .map((o) => o.trim())
+            .filter((o) => o.length > 0);
         this.workflowSettings.set({ ...settings });
     }
     /**
@@ -4245,10 +4595,10 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
      * حذف Node
      */
     deleteNode(nodeId) {
-        const nodes = this.visualNodes().filter(n => n.id !== nodeId);
+        const nodes = this.visualNodes().filter((n) => n.id !== nodeId);
         // حذف اتصالات به این نود
-        nodes.forEach(n => {
-            n.connections = n.connections.filter(c => c !== nodeId);
+        nodes.forEach((n) => {
+            n.connections = n.connections.filter((c) => c !== nodeId);
         });
         this.visualNodes.set(nodes);
         if (this.selectedNode()?.id === nodeId) {
@@ -4261,15 +4611,15 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
      */
     connectNodes(fromId, toId, outcome) {
         const nodes = this.visualNodes();
-        const fromNodeIndex = nodes.findIndex(n => n.id === fromId);
-        const toNode = nodes.find(n => n.id === toId);
+        const fromNodeIndex = nodes.findIndex((n) => n.id === fromId);
+        const toNode = nodes.find((n) => n.id === toId);
         if (fromNodeIndex !== -1 && toNode) {
             const fromNode = nodes[fromNodeIndex];
             // Use outcome-based connections if available
             if (outcome && fromNode.outcomes && fromNode.outcomes.length > 1) {
                 const outcomeConnections = fromNode.outcomeConnections || [];
                 // Check if this outcome already has a connection
-                const existingConnection = outcomeConnections.find(c => c.outcome === outcome);
+                const existingConnection = outcomeConnections.find((c) => c.outcome === outcome);
                 if (existingConnection) {
                     this.addLog('warning', `⚠️ Outcome "${outcome}" قبلاً متصل شده است`);
                     return;
@@ -4279,7 +4629,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 updatedNodes[fromNodeIndex] = {
                     ...fromNode,
                     outcomeConnections: [...outcomeConnections, { outcome, targetNodeId: toId }],
-                    connections: [...fromNode.connections, toId] // Keep for backward compat
+                    connections: [...fromNode.connections, toId], // Keep for backward compat
                 };
                 this.visualNodes.set(updatedNodes);
                 this.addLog('success', `🔗 ${fromNode.name} [${outcome}] → ${toNode.name}`);
@@ -4290,7 +4640,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                     const updatedNodes = [...nodes];
                     updatedNodes[fromNodeIndex] = {
                         ...fromNode,
-                        connections: [...fromNode.connections, toId]
+                        connections: [...fromNode.connections, toId],
                     };
                     this.visualNodes.set(updatedNodes);
                     this.addLog('success', `🔗 ${fromNode.name} متصل شد به ${toNode.name}`);
@@ -4309,7 +4659,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
      */
     disconnectNodes(fromId, toId, outcome) {
         const nodes = this.visualNodes();
-        const fromNodeIndex = nodes.findIndex(n => n.id === fromId);
+        const fromNodeIndex = nodes.findIndex((n) => n.id === fromId);
         if (fromNodeIndex !== -1) {
             const fromNode = nodes[fromNodeIndex];
             const updatedNodes = [...nodes];
@@ -4317,16 +4667,16 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             if (outcome && fromNode.outcomeConnections) {
                 updatedNodes[fromNodeIndex] = {
                     ...fromNode,
-                    outcomeConnections: fromNode.outcomeConnections.filter(c => !(c.outcome === outcome && c.targetNodeId === toId)),
-                    connections: fromNode.connections.filter(c => c !== toId)
+                    outcomeConnections: fromNode.outcomeConnections.filter((c) => !(c.outcome === outcome && c.targetNodeId === toId)),
+                    connections: fromNode.connections.filter((c) => c !== toId),
                 };
             }
             else {
                 // Simple disconnect
                 updatedNodes[fromNodeIndex] = {
                     ...fromNode,
-                    connections: fromNode.connections.filter(c => c !== toId),
-                    outcomeConnections: fromNode.outcomeConnections?.filter(c => c.targetNodeId !== toId)
+                    connections: fromNode.connections.filter((c) => c !== toId),
+                    outcomeConnections: fromNode.outcomeConnections?.filter((c) => c.targetNodeId !== toId),
                 };
             }
             this.visualNodes.set(updatedNodes);
@@ -4372,12 +4722,12 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             position: { x, y },
             connections: connections,
             outcomeConnections: outcomeConnections,
-            outcomes: outcomes
+            outcomes: outcomes,
         };
         nodes.push(node);
         // اگر parent دارد، اتصال برقرار کن (برای Sequence)
         if (parentId && !outcomeConnections.length) {
-            const parentNode = nodes.find(n => n.id === parentId);
+            const parentNode = nodes.find((n) => n.id === parentId);
             if (parentNode && !parentNode.connections.includes(nodeId)) {
                 parentNode.connections.push(nodeId);
             }
@@ -4386,7 +4736,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         if (activity.children && Array.isArray(activity.children) && !outcomeConnections.length) {
             let childY = y;
             activity.children.forEach((child, index) => {
-                childY = y + (index * 100);
+                childY = y + index * 100;
                 this.processActivityToNode(child, nodes, x + 250, childY, nodeId);
             });
         }
@@ -4412,7 +4762,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 id: 'visual-workflow-' + Date.now(),
                 name: 'Visual Workflow',
                 version: 1,
-                root: this.nodeToActivity(rootNode, nodes)
+                root: this.nodeToActivity(rootNode, nodes),
             };
             this.workflowJson.set(JSON.stringify(workflow, null, 2));
             this.addLog('success', '✅ Visual به JSON تبدیل شد');
@@ -4427,8 +4777,8 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
     findRootNode(nodes) {
         // Node ای که به آن اشاره نشده
         const connectedIds = new Set();
-        nodes.forEach(n => n.connections.forEach(c => connectedIds.add(c)));
-        const rootNodes = nodes.filter(n => !connectedIds.has(n.id));
+        nodes.forEach((n) => n.connections.forEach((c) => connectedIds.add(c)));
+        const rootNodes = nodes.filter((n) => !connectedIds.has(n.id));
         return rootNodes[0] || nodes[0];
     }
     /**
@@ -4439,14 +4789,14 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             id: node.id,
             type: node.type,
             name: node.name,
-            properties: node.properties
+            properties: node.properties,
         };
         // اگر children دارد (connections)
         if (node.connections.length > 0) {
             const children = node.connections
-                .map(connId => allNodes.find(n => n.id === connId))
-                .filter(n => n !== undefined)
-                .map(childNode => this.nodeToActivity(childNode, allNodes));
+                .map((connId) => allNodes.find((n) => n.id === connId))
+                .filter((n) => n !== undefined)
+                .map((childNode) => this.nodeToActivity(childNode, allNodes));
             if (children.length > 0) {
                 activity.children = children;
             }
@@ -4468,7 +4818,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             'workflow-activity:entity-create': 'fa-light fa-plus',
             'workflow-activity:entity-read': 'fa-light fa-book-open',
             'workflow-activity:entity-update': 'fa-light fa-pen',
-            'workflow-activity:entity-delete': 'fa-light fa-trash'
+            'workflow-activity:entity-delete': 'fa-light fa-trash',
         };
         return iconMap[type] || 'fa-light fa-circle';
     }
@@ -4477,46 +4827,47 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
      */
     updateNodeProperty(nodeId, propertyName, value) {
         const nodes = this.visualNodes();
-        const nodeIndex = nodes.findIndex(n => n.id === nodeId);
+        const nodeIndex = nodes.findIndex((n) => n.id === nodeId);
         if (nodeIndex !== -1) {
             const node = nodes[nodeIndex];
             const updatedNodes = [...nodes];
             if (propertyName === 'name') {
                 updatedNodes[nodeIndex] = {
                     ...node,
-                    name: value
+                    name: value,
                 };
             }
             else {
                 const newProperties = {
                     ...node.properties,
-                    [propertyName]: value
+                    [propertyName]: value,
                 };
                 let newOutcomes = node.outcomes;
                 const shouldRecomputeOutcomes = (propertyName === 'expectedStatusCodes' && node.type === 'workflow-activity:http-request') ||
                     (propertyName === 'actions' && node.type === 'workflow-activity:human-task');
                 if (shouldRecomputeOutcomes) {
-                    this.findActivityInfo(node.type).then(activityInfo => {
+                    this.findActivityInfo(node.type)
+                        .then((activityInfo) => {
                         if (activityInfo) {
                             const computedOutcomes = this.computeOutcomes(activityInfo, newProperties);
                             const updatedNodes = this.visualNodes();
-                            const nodeIdx = updatedNodes.findIndex(n => n.id === nodeId);
+                            const nodeIdx = updatedNodes.findIndex((n) => n.id === nodeId);
                             if (nodeIdx !== -1) {
                                 updatedNodes[nodeIdx] = {
                                     ...updatedNodes[nodeIdx],
-                                    outcomes: computedOutcomes
+                                    outcomes: computedOutcomes,
                                 };
                                 this.visualNodes.set([...updatedNodes]);
                                 this.addLog('info', `🔄 Outcomes updated: [${computedOutcomes.join(', ')}]`);
                             }
                         }
-                    }).catch(() => {
-                    });
+                    })
+                        .catch(() => { });
                 }
                 updatedNodes[nodeIndex] = {
                     ...node,
                     properties: newProperties,
-                    outcomes: newOutcomes
+                    outcomes: newOutcomes,
                 };
             }
             this.visualNodes.set(updatedNodes);
@@ -4628,7 +4979,9 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 return;
             visited.add(n.id);
             ordered.push(n);
-            const targets = (n.outcomeConnections ?? []).map((c) => this.findNodeById(c.targetNodeId)).filter(Boolean);
+            const targets = (n.outcomeConnections ?? [])
+                .map((c) => this.findNodeById(c.targetNodeId))
+                .filter(Boolean);
             for (const t of targets)
                 add(t);
             const fallback = (n.connections ?? []).map((id) => this.findNodeById(id)).filter(Boolean);
@@ -4733,7 +5086,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             'workflow-activity:entity-create': ['Done', 'Failed'],
             'workflow-activity:entity-read': ['Done', 'NotFound', 'Failed'],
             'workflow-activity:entity-update': ['Done', 'Failed'],
-            'workflow-activity:entity-delete': ['Done', 'Failed']
+            'workflow-activity:entity-delete': ['Done', 'Failed'],
         };
         return outcomeMap[activityInfo.type] || ['Done'];
     }
@@ -4760,7 +5113,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
             position: { x: Math.max(0, x), y: Math.max(0, y) },
             connections: [],
             outcomeConnections: [],
-            outcomes: this.computeOutcomes(this.draggedActivity, defaultProps)
+            outcomes: this.computeOutcomes(this.draggedActivity, defaultProps),
         };
         this.visualNodes.set([...nodes, newNode]);
         const outcomesInfo = newNode.outcomes && newNode.outcomes.length > 1
@@ -4778,7 +5131,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         const rect = target.getBoundingClientRect();
         this.nodeDragOffset = {
             x: event.clientX - rect.left,
-            y: event.clientY - rect.top
+            y: event.clientY - rect.top,
         };
         if (event.dataTransfer) {
             event.dataTransfer.effectAllowed = 'move';
@@ -4802,11 +5155,11 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         const x = event.clientX - rect.left - this.nodeDragOffset.x;
         const y = event.clientY - rect.top - this.nodeDragOffset.y;
         const nodes = this.visualNodes();
-        const nodeIndex = nodes.findIndex(n => n.id === node.id);
+        const nodeIndex = nodes.findIndex((n) => n.id === node.id);
         if (nodeIndex !== -1) {
             nodes[nodeIndex].position = {
                 x: Math.max(0, x),
-                y: Math.max(0, y)
+                y: Math.max(0, y),
             };
             this.visualNodes.set([...nodes]);
         }
@@ -4926,26 +5279,17 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
         };
     }
     activityInputToWidgetProperty(input, group, order) {
-        const path = `properties.${input.name}`;
-        const iface = input.schema?.interface;
-        const widgetType = iface?.type ?? 'text-editor';
-        return {
-            name: input.name,
-            title: input.title,
+        return mapAXPPropertyToWidgetProperty(input, {
             group,
             order,
-            schema: {
-                dataType: input.schema?.dataType ?? 'string',
-                defaultValue: input.schema?.defaultValue,
-                interface: {
-                    path,
-                    name: input.name,
-                    type: widgetType,
-                    options: iface?.options ?? {},
-                },
-            },
-            visible: true,
-        };
+            valuePathPrefix: 'properties',
+            resolveTitle: (prop) => typeof prop.title === 'string' ? prop.title : (this.translationService.resolve(prop.title) ?? prop.name),
+            resolveDescription: (prop) => prop.description === undefined
+                ? undefined
+                : typeof prop.description === 'string'
+                    ? prop.description
+                    : this.translationService.resolve(prop.description),
+        });
     }
     /**
      * Apply property viewer context changes back to the selected node.
@@ -4968,7 +5312,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
      * پیدا کردن Node با ID
      */
     findNodeById(nodeId) {
-        return this.visualNodes().find(n => n.id === nodeId);
+        return this.visualNodes().find((n) => n.id === nodeId);
     }
     /**
      * بررسی اینکه آیا properties خالی است یا نه
@@ -5008,16 +5352,16 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
     getOutcomeColor(outcome) {
         const colorMap = {
             '200': '#10b981', // Green - Success
-            'Done': '#10b981', // Green - Success
-            'Success': '#10b981', // Green - Success
+            Done: '#10b981', // Green - Success
+            Success: '#10b981', // Green - Success
             '404': '#ef4444', // Red - Error
             '500': '#ef4444', // Red - Error
-            'Failed': '#ef4444', // Red - Error
-            'Error': '#ef4444', // Red - Error
-            'Timeout': '#f59e0b', // Orange - Warning
-            'Cancelled': '#f59e0b', // Orange - Warning
-            'Then': '#3b82f6', // Blue - Info
-            'Else': '#64748b', // Gray
+            Failed: '#ef4444', // Red - Error
+            Error: '#ef4444', // Red - Error
+            Timeout: '#f59e0b', // Orange - Warning
+            Cancelled: '#f59e0b', // Orange - Warning
+            Then: '#3b82f6', // Blue - Info
+            Else: '#64748b', // Gray
         };
         return colorMap[outcome] || '#8b5cf6'; // Purple - Default
     }
@@ -5061,7 +5405,7 @@ class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: WorkflowStudioComponent,
             },
-        ], viewQueries: [{ propertyName: "propertyViewerRef", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }, { propertyName: "canvasAreaRef", first: true, predicate: ["canvasAreaRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>{{ '@workflow-management:activities.menus.activity-categories.title' | translate | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          [delayTime]=\"300\"\n          [placeholder]=\"'@workflow-management:workflow-studio.components.activity-categories-tree.search-placeholder' | translate | async\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content>\n      <axp-activity-categories-tree\n        (categoryClick)=\"onCategoryClick($event)\"\n        (activityClick)=\"onActivityClick($event)\"\n        (activityDragStart)=\"onActivityDragStartFromTree($event)\"\n      ></axp-activity-categories-tree>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <!-- JSON / Visual toggle (same pattern as report view mode) -->\n      <div class=\"studio-editor-tabs\">\n        <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n          <ax-button-group-item (onClick)=\"switchTab('json')\" text=\"{{ '@workflow-management:workflow-studio.terms.json-editor' | translate | async }}\" [selected]=\"activeTab() === 'json'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-code\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n          <ax-button-group-item (onClick)=\"switchTab('visual')\" text=\"{{ '@workflow-management:workflow-studio.terms.visual-designer' | translate | async }}\" [selected]=\"activeTab() === 'visual'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-diagram-project\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n        </ax-button-group>\n      </div>\n    </axp-layout-prefix>\n  </axp-page-toolbar>\n\n  <axp-page-content>\n    <div class=\"workflow-studio\">\n      <!-- Main Layout -->\n      <div class=\"studio-body\" [class.properties-hidden]=\"!showPropertiesPanel()\">\n\n        <!-- Editor -->\n        <div class=\"studio-editor\">\n          <!-- Tab Content -->\n          <div class=\"editor-content\">\n            <!-- JSON Tab -->\n            @if (activeTab() === 'json') {\n            <div class=\"json-tab\">\n              <textarea class=\"json-editor\" [value]=\"workflowJson()\"\n                (input)=\"onWorkflowJsonInput($event)\"\n                [placeholder]=\"'@workflow-management:workflow-studio.components.json-editor.placeholder' | translate | async\"\n                spellcheck=\"false\"></textarea>\n            </div>\n            }\n\n            <!-- Visual Tab -->\n            @if (activeTab() === 'visual') {\n            <div class=\"visual-tab\">\n              <!-- Canvas -->\n              <div class=\"visual-canvas\">\n                <div class=\"canvas-toolbar\">\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.zoom-to-fit.title' | translate | async\" (onClick)=\"canvasZoomToFit()\">\n                    <ax-prefix><i class=\"fa-light fa-expand\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.center.title' | translate | async\" (onClick)=\"canvasCenter()\">\n                    <ax-prefix><i class=\"fa-light fa-crosshairs\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.auto-layout.title' | translate | async\" (onClick)=\"canvasAutoLayout()\">\n                    <ax-prefix><i class=\"fa-light fa-sitemap\"></i></ax-prefix>\n                  </ax-button>\n                  <span class=\"toolbar-sep\"></span>\n                  <label class=\"toolbar-auto-save\">\n                    <ax-switch [value]=\"autoSaveEnabled()\" (valueChange)=\"autoSaveEnabled.set($event)\"></ax-switch>\n                    <span>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.auto-save' | translate | async }}</span>\n                  </label>\n                  <span class=\"toolbar-sep\"></span>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.clear-canvas.title' | translate | async\" (onClick)=\"clearCanvas()\">\n                    <ax-prefix><i class=\"fa-light fa-trash\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.convert-to-json.title' | translate | async\" (onClick)=\"visualToJson()\">\n                    <ax-prefix><i class=\"fa-light fa-code\"></i></ax-prefix>\n                  </ax-button>\n                  <span class=\"tool-info\">\n                    <i class=\"fa-light fa-lightbulb\"></i>\n                    <strong>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.hint' | translate | async }}</strong>\n                  </span>\n                </div>\n\n                <div #canvasAreaRef class=\"canvas-area\" (drop)=\"onCanvasDrop($event)\" (dragover)=\"onCanvasDragOver($event)\"\n                  (dragleave)=\"onCanvasDragLeave($event)\">\n                  <!-- SVG for Connections -->\n                  <svg class=\"connections-layer\">\n                    <!-- Outcome-based Connections -->\n                    @for (node of visualNodes(); track node.id) {\n                    @if (node.outcomeConnections && node.outcomeConnections.length > 0) {\n                    @for (conn of node.outcomeConnections; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <g class=\"outcome-connection-group\">\n                      <line [attr.x1]=\"node.position.x + 75\" [attr.y1]=\"node.position.y + 80\"\n                        [attr.x2]=\"targetNode.position.x + 75\" [attr.y2]=\"targetNode.position.y - 50\"\n                        class=\"connection-line outcome-line\" [attr.stroke]=\"getOutcomeColor(conn.outcome)\"\n                        stroke-width=\"2.5\"\n                        [attr.marker-end]=\"'url(#arrowhead-' + getOutcomeColorName(conn.outcome) + ')'\"\n                        style=\"cursor: pointer\" (dblclick)=\"disconnectNodes(node.id, conn.targetNodeId, conn.outcome)\"\n                        [attr.title]=\"'Outcome: ' + conn.outcome + ' (Double-click to remove)'\">\n                        <title>{{ conn.outcome }} \u00E2\u2020\u2019 {{ targetNode.name }}</title>\n                      </line>\n                      <text [attr.x]=\"(node.position.x + targetNode.position.x) / 2 + 75\"\n                        [attr.y]=\"(node.position.y + targetNode.position.y) / 2 + 15\" class=\"connection-label\"\n                        text-anchor=\"middle\" dominant-baseline=\"middle\" [attr.fill]=\"getOutcomeColor(conn.outcome)\" font-size=\"11\"\n                        font-weight=\"600\" pointer-events=\"none\">\n                        {{ conn.outcome }}\n                      </text>\n                    </g>\n                    }\n                    }\n                    } @else {\n                    <!-- Simple Connections (backward compatibility) -->\n                    @for (targetId of node.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    @let sx = node.position.x + 75;\n                    @let sy = node.position.y + 40;\n                    @let tx = targetNode.position.x + 75;\n                    @let ty = targetNode.position.y - 50;\n                    @let pathD = getConnectionPath(sx, sy, tx, ty);\n                    <g class=\"connection-group\">\n                      <path [attr.d]=\"pathD\" class=\"connection-line connection-hit\" fill=\"none\" stroke=\"transparent\"\n                        stroke-width=\"16\" pointer-events=\"stroke\" (dblclick)=\"disconnectNodes(node.id, targetId)\">\n                      </path>\n                      <path [attr.d]=\"pathD\" class=\"connection-line\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"2\"\n                        stroke-linecap=\"round\" marker-end=\"url(#arrowhead-default)\" pointer-events=\"none\">\n                      </path>\n                      <title>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.connection-remove-hint' | translate | async }}</title>\n                    </g>\n                    }\n                    }\n                    }\n                    }\n\n                    <defs>\n                      <!-- Arrow markers: larger, rounded tip on line end (refX so tip touches path end) -->\n                      <marker id=\"arrowhead-default\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#64748b\" />\n                      </marker>\n                      <marker id=\"arrowhead-primary\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#8b5cf6\" />\n                      </marker>\n                      <marker id=\"arrowhead-success\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#10b981\" />\n                      </marker>\n                      <marker id=\"arrowhead-error\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#ef4444\" />\n                      </marker>\n                      <marker id=\"arrowhead-warning\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#f59e0b\" />\n                      </marker>\n                      <marker id=\"arrowhead-info\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#3b82f6\" />\n                      </marker>\n                    </defs>\n                  </svg>\n\n                  <!-- Nodes -->\n                  @for (node of visualNodes(); track node.id) {\n                  <div class=\"visual-node\" [class.selected]=\"selectedNode()?.id === node.id\"\n                    [style.left.px]=\"node.position.x\" [style.top.px]=\"node.position.y\" [attr.data-node-id]=\"node.id\"\n                    draggable=\"true\" (dragstart)=\"onNodeDragStart($event, node)\" (drag)=\"onNodeDrag($event, node)\"\n                    (dragend)=\"onNodeDragEnd($event, node)\" (click)=\"selectNodeById(node)\">\n                    <div class=\"node-header\">\n                      <i [class]=\"node.icon\"></i>\n                      <span>{{ node.name }}</span>\n                      <span class=\"node-delete-wrap\" (click)=\"$event.stopPropagation()\">\n                        <ax-button look=\"blank\" size=\"sm\" class=\"node-delete\" (onClick)=\"deleteNodeFromCanvas(node.id)\">\n                          <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                        </ax-button>\n                      </span>\n                    </div>\n\n                    <div class=\"node-body\">\n                      <small>{{ node.type }}</small>\n                    </div>\n\n                    <div class=\"node-connectors\">\n                      <!-- Input Connector -->\n                      <div class=\"connector connector-in\" title=\"Input\" (click)=\"onConnectorClick($event, node, 'in')\">\n                      </div>\n\n                      <!-- Output Connectors - Multiple outcomes support -->\n                      @if (node.outcomes && node.outcomes.length > 1) {\n                      <!-- Multiple outcomes: show separate port for each -->\n                      <div class=\"outcomes-container\">\n                        @for (outcome of node.outcomes; track outcome; let idx = $index) {\n                        <div class=\"outcome-connector\" [class.active]=\"\n                                connectionSource?.node?.id === node.id && connectionSource?.outcome === outcome\n                              \" [attr.data-outcome]=\"outcome\" [title]=\"'Output: ' + outcome\"\n                          (click)=\"onOutcomeConnectorClick($event, node, outcome)\">\n                          <span class=\"outcome-label\">{{ outcome }}</span>\n                          <div class=\"outcome-dot\"></div>\n                        </div>\n                        }\n                      </div>\n                      } @else {\n                      <!-- Single outcome: show simple output connector -->\n                      <div class=\"connector connector-out\" [class.active]=\"connectionSource?.node?.id === node.id\"\n                        title=\"Output\" (click)=\"onConnectorClick($event, node, 'out')\"></div>\n                      }\n                    </div>\n                  </div>\n                  }\n\n                  <!-- Empty State -->\n                  @if (visualNodes().length === 0) {\n                  <div class=\"canvas-empty-state\">\n                    <i class=\"fa-light fa-diagram-project\"></i>\n                    <p>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.title' | translate | async }}</p>\n                    <small>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.description' | translate | async }}</small>\n                  </div>\n                  }\n                </div>\n              </div>\n\n              <!-- Workflow Panel (when no node selected, Elsa-style) -->\n              @if (!selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel workflow-panel\">\n                <div class=\"properties-header\">\n                  <i class=\"fa-light fa-diagram-project\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.workflow-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.metadata' | translate | async }}</h5>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.name' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().name\" [disabled]=\"true\" />\n                    </div>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.description' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().description\" [disabled]=\"true\" />\n                    </div>\n                  </section>\n                  <div class=\"properties-divider\"></div>\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.information' | translate | async }}</h5>\n                    <div class=\"workflow-info-table\">\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.definition-id' | translate | async }}</span>\n                        <span class=\"info-actions\">\n                          <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.workflow-panel.copy' | translate | async\" (onClick)=\"copyDefinitionIdToClipboard()\">\n                            <ax-prefix><i class=\"fa-light fa-copy\"></i></ax-prefix>\n                          </ax-button>\n                        </span>\n                        <span class=\"info-value\">{{ workflowSettings().definitionId || 'new-workflow' }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.version' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().version }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.status' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().isPublished ? ('@workflow-management:workflow-studio.components.workflow-panel.published' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.draft' | translate | async) }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.usable-as-activity' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().usableAsActivity ? ('@general:terms.common.yes-no.yes' | translate | async) : ('@general:terms.common.yes-no.no' | translate | async) }}</span>\n                      </div>\n                    </div>\n                  </section>\n                  <p class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.workflow-panel.settings-hint' | translate | async }}</p>\n                </div>\n              </div>\n              }\n\n              <!-- Properties Panel (when a node is selected) -->\n              @if (selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel\">\n                    <div class=\"properties-header\">\n                  <i class=\"fa-light fa-sliders\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.properties-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close' | translate | async\" (onClick)=\"selectedNode.set(null)\">\n                      <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  @if (propertyViewerTabs().length > 0) {\n                  <div class=\"properties-widget-section\">\n                    <axp-property-viewer\n                      #propertyViewerRef\n                      [tabsInput]=\"propertyViewerTabs()\"\n                      [mode]=\"'simple'\"\n                      (onChanged)=\"onPropertyViewerChanged($event)\">\n                    </axp-property-viewer>\n                  </div>\n                  } @else {\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.id' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.id\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.type' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.type\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.name' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.name\"\n                      (valueChange)=\"updateNodeProperty(selectedNode()!.id, 'name', $event)\" />\n                  </div>\n                  <p class=\"no-properties\">\n                    {{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-properties' | translate | async }}\n                  </p>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n\n                  <h5>\u00F0\u0178\u201D\u2014 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections-hint' | translate | async }}</small>\n\n                  <!-- Outcome-based Connections -->\n                  @if (selectedNode()!.outcomeConnections && selectedNode()!.outcomeConnections!.length > 0) {\n                  <div class=\"connections-list\">\n                    @for (conn of selectedNode()!.outcomeConnections!; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <div class=\"connection-item outcome-connection\">\n                      <span class=\"outcome-badge\" [style.background]=\"getOutcomeColor(conn.outcome)\">\n                        {{ conn.outcome }}\n                      </span>\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, conn.targetNodeId, conn.outcome)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else if (selectedNode()!.connections.length > 0) {\n                  <!-- Simple Connections (fallback) -->\n                  <div class=\"connections-list\">\n                    @for (targetId of selectedNode()!.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    <div class=\"connection-item\">\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, targetId)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else {\n                  <p class=\"no-properties\">{{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-connections' | translate | async }}</p>\n                  }\n\n                  <!-- Available Outcomes Info -->\n                  @if (selectedNode()!.outcomes && selectedNode()!.outcomes!.length > 1) {\n                  <div class=\"properties-divider\"></div>\n                  <h5>\u00F0\u0178\u201C\u00A4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes-hint' | translate | async }}</small>\n                  <div class=\"outcomes-info\">\n                    @for (outcome of selectedNode()!.outcomes!; track outcome) {\n                    <span class=\"outcome-tag\" [style.borderColor]=\"getOutcomeColor(outcome)\">\n                      <span class=\"outcome-dot\" [style.background]=\"getOutcomeColor(outcome)\"></span>\n                      {{ outcome }}\n                    </span>\n                    }\n                  </div>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\u00F0\u0178\u201C\u009D {{ '@workflow-management:workflow-studio.components.properties-panel.sections.raw-json' | translate | async }}</h5>\n                  <pre class=\"properties-json\">{{ selectedNode() | json }}</pre>\n                </div>\n              </div>\n              }\n\n              <!-- Toggle Button for Properties (when closed) -->\n              @if (!showPropertiesPanel()) {\n              <ax-button look=\"blank\" class=\"sidebar-toggle-btn right\" (onClick)=\"togglePropertiesPanel()\"\n                [title]=\"selectedNode() ? ('@workflow-management:workflow-studio.components.properties-panel.actions.show-panel' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.show-panel' | translate | async)\">\n                <ax-prefix><i class=\"fa-light fa-sliders\"></i></ax-prefix>\n              </ax-button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n\n      </div>\n\n      <!-- Workflow Settings: opened via Layout Builder dialog in openWorkflowSettings() -->\n\n      <!-- Workflow Execution Dialog -->\n      @if (showExecutionDialog()) {\n      <div class=\"execution-dialog-overlay\" (click)=\"closeExecutionDialog()\">\n        <div class=\"execution-dialog\" (click)=\"$event.stopPropagation()\">\n          <!-- Dialog Header -->\n          <div class=\"execution-dialog-header\">\n            <div class=\"header-content\">\n              <i class=\"fa-light fa-play-circle\"></i>\n              <div class=\"header-info\">\n                <h2>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.title' | translate |\n                  async }}</h2>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.description' | translate\n                  | async }}</p>\n              </div>\n            </div>\n            <ax-button look=\"blank\" size=\"sm\" class=\"close-btn\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n            </ax-button>\n          </div>\n\n          <!-- Dialog Body -->\n          <div class=\"execution-dialog-body\">\n            <!-- Workflow Info Panel (Before Execution) -->\n            @if (!workflowInstanceState()) {\n            <div class=\"workflow-info-panel\">\n              <div class=\"start-section\">\n                <div class=\"start-illustration\">\n                  <i class=\"fa-light fa-rocket\"></i>\n                </div>\n                <h3>{{ '@workflow-management:test-pages.workflow-studio.messages.info.ready-to-execute' | translate |\n                  async }}</h3>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.messages.info.click-to-start' | translate | async\n                  }}</p>\n                <ax-button\n                  [text]=\"'@workflow-management:test-pages.workflow-studio.actions.start-execution.title' | translate | async\"\n                  color=\"success\" size=\"lg\" (onClick)=\"startWorkflowExecution()\">\n                </ax-button>\n              </div>\n            </div>\n            }\n\n\n            <!-- Custom UI for Registration -->\n            @if (false) {\n            <div class=\"registration-ui\">\n              <div class=\"registration-card\">\n                <div class=\"registration-icon\">\n                  <i class=\"fa-light fa-user-circle\"></i>\n                </div>\n                <h3>\u00D9\u0081\u00D8\u00B1\u00D8\u00A2\u00DB\u0152\u00D9\u2020\u00D8\u00AF \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026</h3>\n                <p class=\"registration-desc\">\n                  \u00D8\u00A7\u00DB\u0152\u00D9\u2020 \u00D9\u0081\u00D9\u201E\u00D9\u02C6 \u00D8\u00B4\u00D8\u00A7\u00D9\u2026\u00D9\u201E \u00DA\u2020\u00D9\u2020\u00D8\u00AF \u00D9\u2026\u00D8\u00B1\u00D8\u00AD\u00D9\u201E\u00D9\u2021 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA \u00DA\u00A9\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00AF\u00D9\u2021\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1 \u00D8\u00B1\u00D8\u00A7 \u00D8\u00AC\u00D9\u2026\u00D8\u00B9\u00E2\u20AC\u0152\u00D8\u00A2\u00D9\u02C6\u00D8\u00B1\u00DB\u0152 \u00DA\u00A9\u00D8\u00B1\u00D8\u00AF\u00D9\u2021 \u00D9\u02C6 \u00D8\u00AF\u00D8\u00B1 \u00D9\u2020\u00D9\u2021\u00D8\u00A7\u00DB\u0152\u00D8\u00AA \u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D9\u2026\u00DB\u0152\u00E2\u20AC\u0152\u00DA\u00A9\u00D9\u2020\u00D8\u00AF.\n                </p>\n\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"registration-progress\">\n                  <div class=\"progress-spinner\">\n                    <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  </div>\n                  <p>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7\u00DB\u0152 \u00D9\u2026\u00D8\u00B1\u00D8\u00A7\u00D8\u00AD\u00D9\u201E \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026...</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"registration-success\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h4>\u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF!</h4>\n                  <p>\u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00B4\u00D9\u2026\u00D8\u00A7 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00A8\u00D9\u2021 \u00D8\u00B2\u00D9\u02C6\u00D8\u00AF\u00DB\u0152 \u00D8\u00A8\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00B4\u00D8\u00A8\u00D9\u02C6\u00D8\u00B1\u00D8\u00AF \u00D9\u2026\u00D9\u2020\u00D8\u00AA\u00D9\u201A\u00D9\u201E \u00D8\u00AE\u00D9\u02C6\u00D8\u00A7\u00D9\u2021\u00DB\u0152\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF.</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Default Execution View -->\n            @if (workflowInstanceState()) {\n            <div class=\"default-execution-view\">\n              <div class=\"execution-status\">\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"status-running\">\n                  <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  <h3>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7...</h3>\n                  <p>Workflow \u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA. \u00D9\u201E\u00D8\u00B7\u00D9\u0081\u00D8\u00A7\u00D9\u2039 \u00D8\u00B5\u00D8\u00A8\u00D8\u00B1 \u00DA\u00A9\u00D9\u2020\u00DB\u0152\u00D8\u00AF.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"status-finished\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h3>\u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00AA\u00DA\u00A9\u00D9\u2026\u00DB\u0152\u00D9\u201E \u00D8\u00B4\u00D8\u00AF</h3>\n                  <p>Workflow \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00AA\u00D9\u2026\u00D8\u00A7\u00D9\u2026 Activities \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF\u00D9\u2020\u00D8\u00AF.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'error') {\n                <div class=\"status-error\">\n                  <i class=\"fa-light fa-times-circle\"></i>\n                  <h3>\u00D8\u00AE\u00D8\u00B7\u00D8\u00A7 \u00D8\u00AF\u00D8\u00B1 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</h3>\n                  <p>{{ workflowInstanceState()?.error }}</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Execution Logs Panel -->\n            @if (workflowInstanceState() && executionLogs().length > 0) {\n            <div class=\"execution-logs-panel\">\n              <h3><i class=\"fa-light fa-terminal\"></i> \u00D9\u201E\u00D8\u00A7\u00DA\u00AF\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</h3>\n              <div class=\"logs-container-compact\">\n                @for (log of executionLogs(); track $index) {\n                <div class=\"log-item-compact\" [class]=\"'log-' + log.level\">\n                  <span class=\"log-time\">{{ log.timestamp | date: 'HH:mm:ss' }}</span>\n                  <span class=\"log-icon\">\n                    @switch (log.level) {\n                    @case ('info') {\n                    <i class=\"fa-light fa-info-circle\"></i>\n                    }\n                    @case ('success') {\n                    <i class=\"fa-light fa-check-circle\"></i>\n                    }\n                    @case ('warning') {\n                    <i class=\"fa-light fa-exclamation-triangle\"></i>\n                    }\n                    @case ('error') {\n                    <i class=\"fa-light fa-times-circle\"></i>\n                    }\n                    }\n                  </span>\n                  <span class=\"log-message\">{{ log.message }}</span>\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- Dialog Footer -->\n          <div class=\"execution-dialog-footer\">\n            <div class=\"footer-info\">\n              @if (workflowInstanceState()?.startTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-clock\"></i>\n                \u00D8\u00B4\u00D8\u00B1\u00D9\u02C6\u00D8\u00B9: {{ workflowInstanceState()!.startTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n              @if (workflowInstanceState()?.endTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-flag-checkered\"></i>\n                \u00D9\u00BE\u00D8\u00A7\u00DB\u0152\u00D8\u00A7\u00D9\u2020: {{ workflowInstanceState()!.endTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <ax-button\n                [text]=\"(workflowInstanceState() ? '@general:actions.close.title' : '@general:actions.cancel.title') | translate | async\"\n                color=\"secondary\" size=\"md\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              </ax-button>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>\n", styles: [".sidebar-header .toggle-btn{padding:.5rem;margin-left:auto;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;transition:all .2s}.sidebar-header .toggle-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.sidebar-header .toggle-btn i{font-size:.875rem}.sidebar-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:100;padding:1rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#8b5cf6;cursor:pointer;box-shadow:0 4px 12px #0000001a;transition:all .3s}.sidebar-toggle-btn:hover{background:#8b5cf6;color:#fff;box-shadow:0 8px 24px #8b5cf64d;transform:translateY(-50%) scale(1.1)}.sidebar-toggle-btn.left{left:0;border-left:none;border-radius:0 8px 8px 0}.sidebar-toggle-btn.right{right:0;border-right:none;border-radius:8px 0 0 8px}.sidebar-toggle-btn i{font-size:1.25rem;display:block}.properties-header .header-actions{display:flex;gap:.5rem;margin-left:auto}.properties-header .header-btn{padding:.375rem .5rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;cursor:pointer;transition:all .2s}.properties-header .header-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.properties-header .header-btn i{font-size:.75rem}.connections-list{margin-top:.75rem}.connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.connection-item i{color:#8b5cf6}.connection-item span{flex:1;color:#1e293b}.connection-item .remove-btn{padding:.25rem .375rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#ef4444;cursor:pointer;transition:all .2s}.connection-item .remove-btn:hover{background:#fef2f2;border-color:#ef4444}.connection-item .remove-btn i{font-size:.75rem;color:inherit}.property-editor{margin-top:.75rem}.property-editor .property-row label{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.property-editor .property-row label .property-type-badge{padding:.125rem .375rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;font-size:.625rem;font-weight:400;color:#64748b;text-transform:lowercase;font-family:JetBrains Mono,monospace}.property-editor .property-row select{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;background:#fff;cursor:pointer;transition:all .2s}.property-editor .property-row select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.property-editor .property-row textarea{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem;font-family:JetBrains Mono,monospace;color:#1e293b;resize:vertical;transition:all .2s}.property-editor .property-row textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.workflow-studio{display:flex;flex-direction:column;height:100vh;background:#f8fafc;overflow:hidden}.studio-editor-tabs ax-button-group-item[selected],.studio-editor-tabs ax-button-group-item.ax-selected{font-weight:600;opacity:1}.workflow-popup .popup-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}.workflow-popup .popup-header h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem;font-weight:700}.workflow-popup .popup-header p{margin:0;color:#64748b;font-size:.95rem}.workflow-popup .popup-body{max-height:60vh;overflow-y:auto;padding:0 .5rem}.workflow-popup .popup-body h4{margin:1.5rem 0 .75rem;color:#374151;font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.workflow-popup .popup-body ul{margin:0;padding-left:1.5rem}.workflow-popup .popup-body ul li{margin-bottom:.5rem;color:#4b5563}.workflow-popup .popup-body ul li strong{color:#1f2937}.workflow-popup .workflow-info{background:#f8fafc;padding:1rem;border-radius:8px;border:1px solid #e2e8f0}.workflow-popup .workflow-variables{background:#fef3c7;padding:1rem;border-radius:8px;border:1px solid #f59e0b}.workflow-popup .workflow-flow{background:#ecfdf5;padding:1rem;border-radius:8px;border:1px solid #10b981}.workflow-popup .workflow-flow .flow-steps{display:flex;flex-direction:column;gap:.75rem}.workflow-popup .workflow-flow .flow-steps .flow-step{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#fff;border-radius:6px;border:1px solid #d1d5db}.workflow-popup .workflow-flow .flow-steps .flow-step .step-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;color:#fff;border-radius:50%;font-size:.8rem;font-weight:600}.workflow-popup .workflow-flow .flow-steps .flow-step .step-text{color:#374151;font-weight:500}.workflow-popup .workflow-json{background:#1f2937;padding:1rem;border-radius:8px;border:1px solid #374151}.workflow-popup .workflow-json .json-preview{background:transparent;color:#e5e7eb;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto}.workflow-popup .popup-footer{text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}.workflow-popup .popup-footer .btn{padding:.75rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background-color .2s}.workflow-popup .popup-footer .btn:hover{background:#2563eb}.workflow-popup .popup-footer .btn i{font-size:.9rem}.view-workflow-link{color:#3b82f6;text-decoration:none;font-size:.85rem;margin-left:.5rem;transition:color .2s}.view-workflow-link:hover{color:#1d4ed8;text-decoration:underline}.studio-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d}.studio-header .header-title{display:flex;align-items:center;gap:.75rem}.studio-header .header-title i{font-size:1.75rem;color:#8b5cf6}.studio-header .header-title h1{margin:0;font-size:1.5rem;font-weight:700;color:#1e293b}.studio-header .header-title .badge{padding:.25rem .75rem;background:#8b5cf6;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600}.studio-header .header-actions{display:flex;gap:.75rem;align-items:center}.samples-dropdown{position:relative}.samples-dropdown .samples-menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:320px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 25px #0000001a;z-index:1000;max-height:400px;overflow-y:auto}.samples-dropdown .samples-menu .sample-item{padding:.875rem 1rem;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:all .2s}.samples-dropdown .samples-menu .sample-item:last-child{border-bottom:none}.samples-dropdown .samples-menu .sample-item:hover{background:#f8fafc;transform:translate(4px)}.samples-dropdown .samples-menu .sample-item i{font-size:1.25rem;margin-top:.125rem;color:#8b5cf6}.samples-dropdown .samples-menu .sample-item .sample-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.samples-dropdown .samples-menu .sample-item .sample-info strong{color:#1e293b;font-size:.875rem;font-weight:600}.samples-dropdown .samples-menu .sample-item .sample-info span{color:#64748b;font-size:.75rem;line-height:1.4}.studio-body{display:grid;grid-template-columns:1fr;gap:0;flex:1;overflow:hidden;transition:grid-template-columns .3s ease}.studio-body.sidebar-hidden,.studio-body.properties-hidden,.studio-body.sidebar-hidden.properties-hidden{grid-template-columns:1fr}.studio-sidebar{background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}.studio-sidebar .sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-sidebar .sidebar-header i{font-size:1.25rem;color:#8b5cf6}.studio-sidebar .sidebar-header h3{flex:1;margin:0;font-size:1.125rem;font-weight:600;color:#1e293b}.activities-tree{flex:1;overflow-y:auto;padding:.5rem}.category-section{margin-bottom:.5rem}.category-section .category-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s;background:#f8fafc}.category-section .category-header:hover{background:#f1f5f9}.category-section .category-header.active{background:#ede9fe}.category-section .category-header.active>i:first-child{color:#8b5cf6}.category-section .category-header>i:first-child{font-size:.875rem;color:#94a3b8;transition:transform .2s,color .2s}.category-section .category-header>i:nth-child(2){font-size:1.125rem}.category-section .category-header span{flex:1;font-weight:600;font-size:.875rem;color:#334155}.category-section .category-header .count{flex:none;padding:.125rem .5rem;background:#fff;border-radius:10px;font-size:.75rem;font-weight:600;color:#64748b;border:1px solid #e2e8f0}.activities-list{padding:.5rem 0 .5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;animation:slideDown .3s ease}.activities-list .activities-header{padding:.5rem .75rem;margin-bottom:.5rem}.activities-list .activities-header h4{margin:0;font-size:.875rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.activity-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.875rem;margin-bottom:.75rem;transition:all .2s}.activity-card:hover{border-color:#8b5cf6;box-shadow:0 4px 12px #8b5cf61a;transform:translateY(-1px)}.activity-card .activity-info{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}.activity-card .activity-info>i{font-size:1.5rem;color:#8b5cf6;margin-top:.125rem}.activity-card .activity-info .activity-details{flex:1;display:flex;flex-direction:column;gap:.25rem}.activity-card .activity-info .activity-details strong{font-size:.875rem;color:#1e293b}.activity-card .activity-info .activity-details small{font-size:.75rem;color:#64748b;line-height:1.4}.activity-card .activity-info .activity-details code{font-size:.75rem;color:#8b5cf6;background:#f3f0ff;padding:.125rem .375rem;border-radius:4px;width:fit-content}.activity-card .copy-btn{float:right;padding:.375rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;color:#64748b}.activity-card .copy-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.activity-card .copy-btn i{font-size:.875rem}.activity-card .activity-properties{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f1f5f9}.activity-card .activity-properties .properties-title{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.5rem}.activity-card .activity-properties .property-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.75rem}.activity-card .activity-properties .property-item code{color:#1e293b;background:#f8fafc;padding:.125rem .375rem;border-radius:3px}.activity-card .activity-properties .property-item .property-type{color:#64748b;font-style:italic}.activity-card .activity-properties .property-item .required{color:#ef4444;font-weight:700}.studio-editor{display:flex;flex-direction:column;background:#1e293b;overflow:hidden}.studio-editor .editor-header{padding:1rem 1.25rem;background:#0f172a;display:flex;align-items:center;gap:.5rem}.studio-editor .editor-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .editor-header h3{margin:0;font-size:1rem;font-weight:600;color:#e2e8f0}.studio-editor axp-page-toolbar .editor-tabs{display:flex;gap:.5rem;background:transparent}.studio-editor axp-page-toolbar .editor-tabs .tab-btn{padding:.5rem 1rem;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn i{font-size:.875rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#475569}.studio-editor axp-page-toolbar .editor-tabs .tab-btn.active{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .editor-content{flex:1;display:flex;overflow:hidden}.studio-editor .json-tab{flex:1;display:flex;flex-direction:column}.studio-editor .json-editor{flex:1;padding:1.5rem;background:#1e293b;color:#e2e8f0;border:none;outline:none;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem;line-height:1.6;resize:none;overflow:auto}.studio-editor .json-editor::placeholder{color:#475569}.studio-editor .json-editor::-webkit-scrollbar{width:10px;height:10px}.studio-editor .json-editor::-webkit-scrollbar-track{background:#0f172a}.studio-editor .json-editor::-webkit-scrollbar-thumb{background:#475569;border-radius:5px}.studio-editor .json-editor::-webkit-scrollbar-thumb:hover{background:#64748b}.studio-editor .visual-tab{flex:1;display:flex;background:#f8fafc;position:relative}.studio-editor .visual-canvas{flex:1;display:flex;flex-direction:column;overflow:hidden}.studio-editor .visual-canvas .canvas-toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--ax-surface, white);border-bottom:1px solid var(--ax-border, #e2e8f0)}.studio-editor .visual-canvas .canvas-toolbar .tool-btn{padding:.5rem .75rem;background:var(--ax-surface-alt, #f8fafc);border:1px solid var(--ax-border, #e2e8f0);border-radius:6px;color:var(--ax-text-muted, #64748b);cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .canvas-toolbar .tool-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .visual-canvas .canvas-toolbar .tool-btn i{font-size:.875rem}.studio-editor .visual-canvas .canvas-toolbar .toolbar-sep{width:1px;height:1.25rem;background:var(--ax-border, #e2e8f0);flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);cursor:default}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save ax-switch{flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .tool-info{flex:1;display:flex;align-items:center;gap:.5rem;min-height:1.75rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);line-height:1.4}.studio-editor .visual-canvas .canvas-toolbar .tool-info strong{font-weight:600}.studio-editor .visual-canvas .canvas-toolbar .tool-info i{font-size:1rem;color:#8b5cf6;flex-shrink:0}.studio-editor .visual-canvas .canvas-area{flex:1;position:relative;background:linear-gradient(90deg,#e5e7eb 1px,transparent 1px),linear-gradient(#e5e7eb 1px,transparent 1px);background-size:20px 20px;overflow:auto;min-height:600px}.studio-editor .visual-canvas .connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.studio-editor .visual-canvas .connection-line{fill:none;transition:stroke .2s}.studio-editor .visual-canvas .connection-line.connection-hit{stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}.studio-editor .visual-canvas .connection-line.connection-hit:hover~.outcome-line,.studio-editor .visual-canvas .connection-line.connection-hit:hover~.connection-line:not(.connection-hit){filter:brightness(.9)}.studio-editor .visual-canvas .connection-line:not(.connection-hit){stroke-linecap:round;pointer-events:none}.studio-editor .visual-canvas .connection-line.outcome-line{stroke-width:2.5}.studio-editor .visual-canvas .visual-node{position:absolute;width:150px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;box-shadow:0 2px 8px #0000001a;cursor:move;transition:all .2s;z-index:2}.studio-editor .visual-canvas .visual-node:hover{border-color:#8b5cf6;box-shadow:0 4px 16px #8b5cf633;transform:translateY(-2px)}.studio-editor .visual-canvas .visual-node.selected{border-color:#8b5cf6;border-width:3px;box-shadow:0 0 0 3px #8b5cf633}.studio-editor .visual-canvas .visual-node .node-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-radius:6px 6px 0 0;font-size:.875rem;font-weight:600}.studio-editor .visual-canvas .visual-node .node-header i{font-size:1rem}.studio-editor .visual-canvas .visual-node .node-header span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-editor .visual-canvas .visual-node .node-header .node-delete{padding:.25rem;background:#fff3;border:none;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .visual-node .node-header .node-delete:hover{background:#ef4444cc}.studio-editor .visual-canvas .visual-node .node-header .node-delete i{font-size:.75rem}.studio-editor .visual-canvas .visual-node .node-body{padding:.75rem}.studio-editor .visual-canvas .visual-node .node-body small{display:block;font-size:.75rem;color:#64748b;text-align:center}.studio-editor .visual-canvas .visual-node .node-connectors{position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .connector{position:absolute;width:12px;height:12px;background:#8b5cf6;border:2px solid white;border-radius:50%;cursor:pointer;transition:all .2s;z-index:10}.studio-editor .visual-canvas .visual-node .node-connectors .connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.studio-editor .visual-canvas .visual-node .node-connectors .connector-in{top:-50px;left:50%;transform:translate(-50%);background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out{bottom:-6px;left:50%;transform:translate(-50%);background:#8b5cf6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out.active{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container{position:absolute;bottom:-60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;background:#fff;padding:8px;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:120px;z-index:100}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container:before{content:\"\";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;filter:drop-shadow(0 -2px 2px rgba(0,0,0,.05))}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector:hover{background:#f1f5f9;border-color:#8b5cf6;transform:translate(2px)}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active{background:#fef2f2;border-color:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active .outcome-dot{background:#ef4444;box-shadow:0 0 0 3px #ef444433}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-label{font-size:.75rem;font-weight:600;color:#475569;-webkit-user-select:none;user-select:none;flex:1}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-dot{width:10px;height:10px;background:#8b5cf6;border:2px solid white;border-radius:50%;transition:all .2s;flex-shrink:0}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"200\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Done] .outcome-dot{background:#10b981}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"404\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Failed] .outcome-dot{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Timeout] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Cancelled] .outcome-dot{background:#f59e0b}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Then] .outcome-dot{background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Else] .outcome-dot{background:#64748b}.studio-editor .visual-canvas .canvas-empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.studio-editor .visual-canvas .canvas-empty-state i{font-size:4rem;margin-bottom:1rem;opacity:.5}.studio-editor .visual-canvas .canvas-empty-state p{margin:0 0 .5rem;font-size:1rem;font-weight:500}.studio-editor .visual-canvas .canvas-empty-state small{font-size:.875rem;opacity:.8}.studio-editor .properties-panel{width:280px;background:#fff;border-left:1px solid #e2e8f0;display:flex;flex-direction:column}.studio-editor .properties-panel .properties-header{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid #e2e8f0}.studio-editor .properties-panel .properties-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .properties-panel .properties-header h4{flex:1;margin:0;font-size:.875rem;font-weight:600;color:#1e293b}.studio-editor .properties-panel .properties-header button{padding:.25rem .5rem;background:transparent;border:none;color:#64748b;cursor:pointer;transition:color .2s}.studio-editor .properties-panel .properties-header button:hover{color:#ef4444}.studio-editor .properties-panel .properties-body{flex:1;padding:1rem;overflow-y:auto}.studio-editor .properties-panel .properties-body .properties-widget-section{min-height:0}.studio-editor .properties-panel .properties-body .workflow-panel-section{margin-bottom:1.5rem}.studio-editor .properties-panel .properties-body .workflow-panel-section h5{margin:0 0 .75rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group{margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group label{font-size:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group input,.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group textarea{font-size:.8125rem}.studio-editor .properties-panel .properties-body .workflow-info-table{display:flex;flex-direction:column;gap:.5rem}.studio-editor .properties-panel .properties-body .workflow-info-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #f1f5f9}.studio-editor .properties-panel .properties-body .workflow-info-row:last-child{border-bottom:none}.studio-editor .properties-panel .properties-body .info-label{font-size:.8125rem;font-weight:500;color:#64748b;flex-shrink:0}.studio-editor .properties-panel .properties-body .info-value{font-size:.8125rem;color:#1e293b;text-align:right;word-break:break-all}.studio-editor .properties-panel .properties-body .info-actions{display:flex;align-items:center;gap:.5rem}.studio-editor .properties-panel .properties-body .property-row{margin-bottom:1rem}.studio-editor .properties-panel .properties-body .property-row label{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .property-row input{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .property-row input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.studio-editor .properties-panel .properties-body .property-row input:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.studio-editor .properties-panel .properties-body .properties-divider{height:1px;background:#e2e8f0;margin:1.5rem 0}.studio-editor .properties-panel .properties-body h5{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .properties-hint{display:block;font-size:.75rem;color:#94a3b8;margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .properties-json{margin:.75rem 0 0;padding:.75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;color:#1e293b;overflow-x:auto}.studio-editor .properties-panel .properties-body .no-properties{margin:.75rem 0 0;padding:1rem;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px;text-align:center;font-size:.75rem;color:#94a3b8}.studio-editor .properties-panel .properties-body .connections-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item.outcome-connection{border-left-width:3px}.studio-editor .properties-panel .properties-body .connections-list .connection-item i{color:#64748b;font-size:.875rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item span{flex:1;color:#1e293b;font-weight:500}.studio-editor .properties-panel .properties-body .connections-list .connection-item .outcome-badge{padding:.25rem .5rem;border-radius:4px;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn{padding:.25rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn:hover{background:#fee2e2}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn i{font-size:.75rem;color:inherit}.studio-editor .properties-panel .properties-body .outcomes-info{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:#fff;border:2px solid;border-radius:6px;font-size:.75rem;font-weight:600;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag .outcome-dot{width:8px;height:8px;border-radius:50%}.studio-result{display:flex;flex-direction:column;background:#fff;border-left:1px solid #e2e8f0;overflow:hidden}.studio-result .result-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-result .result-header i{font-size:1.125rem;color:#10b981}.studio-result .result-header h3{flex:1;margin:0;font-size:1rem;font-weight:600;color:#1e293b}.studio-result .result-header .clear-btn{padding:.375rem .75rem;background:#fee2e2;color:#dc2626;border:none;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s}.studio-result .result-header .clear-btn:hover{background:#fecaca}.studio-result .result-header .clear-btn i{font-size:.75rem;color:inherit}.studio-result .result-body{flex:1;overflow-y:auto;padding:1rem}.logs-container{display:flex;flex-direction:column;gap:.5rem}.log-item{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#f8fafc;border-left:3px solid #cbd5e1;border-radius:6px;font-size:.875rem}.log-item.log-info{border-left-color:#3b82f6;background:#eff6ff}.log-item.log-info .log-icon{color:#3b82f6}.log-item.log-success{border-left-color:#10b981;background:#f0fdf4}.log-item.log-success .log-icon{color:#10b981}.log-item.log-warning{border-left-color:#f59e0b;background:#fffbeb}.log-item.log-warning .log-icon{color:#f59e0b}.log-item.log-error{border-left-color:#ef4444;background:#fef2f2}.log-item.log-error .log-icon{color:#ef4444}.log-item .log-time{font-family:JetBrains Mono,monospace;font-size:.75rem;color:#64748b;min-width:80px}.log-item .log-icon{font-size:1rem}.log-item .log-message{flex:1;color:#1e293b}.log-item .log-data-toggle{padding:.25rem .5rem;background:transparent;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .2s}.log-item .log-data-toggle:hover{background:#fff}.log-item .log-data-toggle i{font-size:.75rem;color:#64748b}.log-data{margin:.5rem 0 0;padding:1rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto}.settings-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;padding:2rem;animation:fadeIn .2s ease}.settings-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0}.settings-modal-header .header-title{display:flex;align-items:center;gap:.75rem}.settings-modal-header .header-title i{font-size:1.5rem;color:#8b5cf6}.settings-modal-header .header-title h2{margin:0;font-size:1.25rem;font-weight:700;color:#1e293b}.settings-modal-header .close-btn{padding:.5rem;background:transparent;border:none;color:#64748b;cursor:pointer;border-radius:6px;transition:all .2s}.settings-modal-header .close-btn:hover{background:#f1f5f9;color:#ef4444}.settings-modal-header .close-btn i{font-size:1.25rem}.settings-modal-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.settings-tabs{padding:0 1.5rem}.settings-content{flex:1;overflow-y:auto;padding:2rem}.settings-section h3{margin:0 0 1.5rem;font-size:1rem;font-weight:600;color:#1e293b}.settings-section .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.settings-section .section-header h3{margin:0}.settings-section .section-header .add-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#8b5cf6;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.settings-section .section-header .add-btn:hover{background:#7c3aed;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf64d}.settings-section .section-header .add-btn i{font-size:.875rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:.875rem;font-weight:600;color:#475569;margin-bottom:.5rem}.form-group small{display:block;font-size:.75rem;color:#94a3b8;margin-top:.375rem}.form-group.checkbox-group{margin-bottom:0}.form-group.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-bottom:0}.form-group.checkbox-group label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group.checkbox-group label span{font-size:.875rem;font-weight:500}.form-group.flex-1{flex:1}.form-row{display:flex;gap:1rem;align-items:flex-start}.form-input,.form-select,.form-textarea{width:100%;padding:.625rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.form-input::placeholder,.form-select::placeholder,.form-textarea::placeholder{color:#cbd5e1}.form-textarea{resize:vertical;font-family:inherit}.items-list{display:flex;flex-direction:column;gap:1rem}.item-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s}.item-card:hover{border-color:#cbd5e1;box-shadow:0 2px 8px #0000000d}.item-card .item-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#f1f5f9;border-bottom:1px solid #e2e8f0}.item-card .item-header .item-number{font-size:.75rem;font-weight:700;color:#8b5cf6;padding:.25rem .5rem;background:#fff;border-radius:4px}.item-card .item-header .remove-btn{padding:.375rem .625rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.item-card .item-header .remove-btn:hover{background:#fee2e2}.item-card .item-header .remove-btn i{font-size:.875rem}.item-card .item-body{padding:1rem}.advanced-group{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e2e8f0}.advanced-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.advanced-group h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.5px}.outcomes-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.outcomes-preview .outcome-chip{display:inline-flex;align-items:center;padding:.375rem .75rem;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;font-size:.75rem;font-weight:600;color:#475569}.export-info{margin-top:1rem;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.export-info .info-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #e2e8f0}.export-info .info-row:last-child{border-bottom:none;padding-bottom:0}.export-info .info-row .label{font-size:.75rem;font-weight:600;color:#64748b;min-width:120px}.export-info .info-row code{flex:1;padding:.25rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:4px;font-size:.75rem;color:#1e293b;font-family:JetBrains Mono,monospace}.settings-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:1.5rem 2rem;border-top:1px solid #e2e8f0;background:#f8fafc}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;color:#94a3b8}.empty-state i{font-size:3rem;margin-bottom:1rem}.empty-state p{margin:0;font-size:.875rem}.final-result{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #e2e8f0}.final-result .result-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#f8fafc;border-radius:8px;margin-bottom:1rem;cursor:pointer;transition:all .2s}.final-result .result-header:hover{background:#f1f5f9;transform:translate(-2px)}.final-result .result-header h4{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase}.final-result .result-header h4 i{font-size:.875rem;transition:transform .2s}.final-result .result-header .toggle-hint{font-size:.75rem;color:#94a3b8}.final-result .result-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem}.final-result .result-card .result-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.final-result .result-card .result-row:not(:last-child){border-bottom:1px solid #e2e8f0}.final-result .result-card .result-row strong{font-size:.875rem;color:#475569;min-width:100px}.final-result .result-card .result-row .badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.final-result .result-card .result-row .badge.badge-running{background:#dbeafe;color:#1e40af}.final-result .result-card .result-row .badge.badge-finished{background:#d1fae5;color:#065f46}.final-result .result-card .result-row .badge.badge-cancelled{background:#fed7aa;color:#92400e}.final-result .result-card .result-row .badge.badge-faulted{background:#fee2e2;color:#991b1b}.final-result .result-card .result-row pre{margin:.5rem 0 0;padding:.75rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto;width:100%}.activities-list::-webkit-scrollbar,.result-body::-webkit-scrollbar{width:8px}.activities-list::-webkit-scrollbar-track,.result-body::-webkit-scrollbar-track{background:#f1f5f9}.activities-list::-webkit-scrollbar-thumb,.result-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.activities-list::-webkit-scrollbar-thumb:hover,.result-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.activity-card{cursor:grab}.activity-card:active{cursor:grabbing}.activity-card[draggable=true]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node[draggable=true]{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node:active{cursor:grabbing}.canvas-area[data-drag-over=true]{background-color:#8b5cf60d}.connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.connector-out.active{animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 3px #ef44444d}50%{box-shadow:0 0 0 6px #ef44441a}}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}.execution-dialog-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.execution-dialog{width:90vw;max-width:1200px;height:90vh;background:#fff;border-radius:16px;box-shadow:0 25px 50px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease}.execution-dialog-header{padding:1.5rem 2rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-header .header-content{display:flex;align-items:center;gap:1rem;flex:1}.execution-dialog-header .header-content>i{font-size:2.5rem;opacity:.9}.execution-dialog-header .header-content .header-info h2{margin:0;font-size:1.75rem;font-weight:700}.execution-dialog-header .header-content .header-info p{margin:.25rem 0 0;opacity:.9;font-size:.95rem}.execution-dialog-header .close-btn{background:#fff3;border:none;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff;font-size:1.25rem}.execution-dialog-header .close-btn:hover:not(:disabled){background:#ffffff4d;transform:scale(1.05)}.execution-dialog-header .close-btn:disabled{opacity:.5;cursor:not-allowed}.execution-dialog-body{flex:1;overflow-y:auto;padding:2rem;background:#f8fafc}.execution-dialog-footer{padding:1rem 2rem;background:#fff;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-footer .footer-info{display:flex;gap:1.5rem}.execution-dialog-footer .footer-info .time-info{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem}.execution-dialog-footer .footer-info .time-info i{color:#8b5cf6}.execution-dialog-footer .footer-actions{display:flex;gap:.75rem}.workflow-info-panel{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000000d}.workflow-info-panel .info-section{margin-bottom:2rem}.workflow-info-panel .info-section h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.25rem}.workflow-info-panel .info-section h3 i{color:#8b5cf6}.workflow-info-panel .info-section .description{color:#475569;line-height:1.7;margin:0}.workflow-info-panel .info-section .features-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.workflow-info-panel .info-section .features-list li{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#f8fafc;border-radius:8px;color:#334155}.workflow-info-panel .info-section .features-list li i{color:#10b981;font-size:1.125rem}.workflow-info-panel .start-section{text-align:center;padding:2rem;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:12px;border:2px dashed #10b981}.workflow-info-panel .start-section .start-illustration{margin-bottom:1rem}.workflow-info-panel .start-section .start-illustration i{font-size:4rem;color:#10b981;animation:float 3s ease-in-out infinite}.workflow-info-panel .start-section h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem}.workflow-info-panel .start-section p{margin:0 0 1.5rem;color:#64748b}.state-machine-ui .issue-tracker{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px #0000000d}.state-machine-ui .issue-tracker .issue-header-main{padding:1.5rem 2rem 1rem;border-bottom:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#64748b;margin-bottom:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .project-name{color:#3b82f6;font-weight:600}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .separator{color:#94a3b8}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .issue-key{color:#64748b}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title{display:flex;align-items:center;gap:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge{padding:.375rem .75rem;border-radius:4px;font-size:.8125rem;font-weight:600;display:flex;align-items:center;gap:.375rem;background:#eff6ff;color:#3b82f6}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge i{font-size:1rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .issue-main-title{margin:0;font-size:1.5rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-action-bar{padding:.75rem 2rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left{display:flex;gap:.5rem}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s;color:#334155}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:hover:not(:disabled){background:#f1f5f9;border-color:#94a3b8}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:disabled{opacity:.5;cursor:not-allowed}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary:hover:not(:disabled){background:#2563eb}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success{background:#10b981;color:#fff;border-color:#10b981}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success:hover:not(:disabled){background:#059669}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning{background:#f59e0b;color:#fff;border-color:#f59e0b}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning:hover:not(:disabled){background:#d97706}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;color:#334155;transition:all .2s}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn:hover{background:#f1f5f9}.state-machine-ui .issue-tracker .issue-main-content{display:grid;grid-template-columns:320px 1fr;gap:2rem;padding:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row{display:flex;padding:.625rem 0;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row:last-child{border-bottom:none}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row label{min-width:100px;font-size:.8125rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value i{font-size:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .status-badge{padding:.25rem .625rem;border-radius:4px;color:#fff;font-weight:600;font-size:.75rem;text-transform:uppercase}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link{color:#3b82f6;font-size:.8125rem;text-decoration:none;margin-left:.5rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link:hover{text-decoration:underline}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .user-avatar{width:24px;height:24px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz{background:#f8fafc;border-radius:8px;padding:1.5rem;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz h3{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state{display:flex;flex-direction:column;align-items:center;gap:.375rem;opacity:.4;transition:opacity .2s}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active,.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.completed{opacity:1}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;box-shadow:0 2px 4px #0000001a}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-name{font-size:.6875rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active .state-name{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-arrow{color:#cbd5e1;font-size:.75rem;margin:0 .25rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section h3,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content{padding:1rem;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content p,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content p{margin:0;color:#475569;line-height:1.7;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline{display:flex;flex-direction:column;gap:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item{display:flex;gap:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-avatar{width:32px;height:32px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content{flex:1;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header{font-size:.875rem;color:#334155;line-height:1.6;margin-bottom:.375rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header strong{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header .activity-action{color:#64748b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#94a3b8}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta .activity-label{color:#8b5cf6;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item:last-child .activity-content{border-bottom:none;padding-bottom:0}.registration-ui{display:flex;justify-content:center;align-items:center;min-height:400px}.registration-ui .registration-card{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000000d;text-align:center;max-width:500px}.registration-ui .registration-card .registration-icon{margin-bottom:1.5rem}.registration-ui .registration-card .registration-icon i{font-size:5rem;color:#8b5cf6}.registration-ui .registration-card h3{margin:0 0 .75rem;color:#1e293b;font-size:1.75rem;font-weight:700}.registration-ui .registration-card .registration-desc{margin:0 0 2rem;color:#64748b;line-height:1.7}.registration-ui .registration-card .registration-progress{padding:2rem;background:#fef3c7;border-radius:8px}.registration-ui .registration-card .registration-progress .progress-spinner{margin-bottom:1rem}.registration-ui .registration-card .registration-progress .progress-spinner i{font-size:3rem;color:#f59e0b}.registration-ui .registration-card .registration-progress p{margin:0;color:#92400e;font-weight:500}.registration-ui .registration-card .registration-success{padding:2rem;background:#f0fdf4;border-radius:8px}.registration-ui .registration-card .registration-success i{font-size:4rem;color:#10b981;margin-bottom:1rem}.registration-ui .registration-card .registration-success h4{margin:0 0 .5rem;color:#064e3b;font-size:1.5rem;font-weight:700}.registration-ui .registration-card .registration-success p{margin:0;color:#065f46}.default-execution-view{display:flex;justify-content:center;align-items:center;min-height:400px}.default-execution-view .execution-status{text-align:center;padding:3rem;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;min-width:400px}.default-execution-view .execution-status i{font-size:5rem;margin-bottom:1.5rem}.default-execution-view .execution-status h3{margin:0 0 .75rem;font-size:1.75rem;font-weight:700}.default-execution-view .execution-status p{margin:0;color:#64748b;line-height:1.7}.default-execution-view .execution-status .status-running i{color:#f59e0b}.default-execution-view .execution-status .status-finished i{color:#10b981}.default-execution-view .execution-status .status-error i{color:#ef4444}.execution-logs-panel{margin-top:2rem;background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px #0000000d}.execution-logs-panel h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.125rem}.execution-logs-panel h3 i{color:#8b5cf6}.execution-logs-panel .logs-container-compact{max-height:300px;overflow-y:auto;background:#f8fafc;border-radius:8px;padding:.75rem}.execution-logs-panel .logs-container-compact .log-item-compact{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.execution-logs-panel .logs-container-compact .log-item-compact:last-child{margin-bottom:0}.execution-logs-panel .logs-container-compact .log-item-compact .log-time{font-family:Courier New,monospace;color:#64748b;font-size:.8125rem;min-width:70px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon{display:flex;align-items:center;justify-content:center;width:20px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon i{font-size:1rem}.execution-logs-panel .logs-container-compact .log-item-compact .log-message{flex:1;color:#334155}.execution-logs-panel .logs-container-compact .log-item-compact.log-info{background:#eff6ff}.execution-logs-panel .logs-container-compact .log-item-compact.log-info .log-icon i{color:#3b82f6}.execution-logs-panel .logs-container-compact .log-item-compact.log-success{background:#f0fdf4}.execution-logs-panel .logs-container-compact .log-item-compact.log-success .log-icon i{color:#10b981}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning{background:#fffbeb}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning .log-icon i{color:#f59e0b}.execution-logs-panel .logs-container-compact .log-item-compact.log-error{background:#fef2f2}.execution-logs-panel .logs-container-compact .log-item-compact.log-error .log-icon i{color:#ef4444}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$1.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$1.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i6.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXMActivityCategoriesTreeComponent, selector: "axp-activity-categories-tree", outputs: ["categoryClick", "activityClick", "activityDragStart"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "propertyViewerRef", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }, { propertyName: "canvasAreaRef", first: true, predicate: ["canvasAreaRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>{{ '@workflow-management:activities.menus.activity-categories.title' | translate | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          [delayTime]=\"300\"\n          [placeholder]=\"'@workflow-management:workflow-studio.components.activity-categories-tree.search-placeholder' | translate | async\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content>\n      <axp-activity-categories-tree\n        (categoryClick)=\"onCategoryClick($event)\"\n        (activityClick)=\"onActivityClick($event)\"\n        (activityDragStart)=\"onActivityDragStartFromTree($event)\"\n      ></axp-activity-categories-tree>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <!-- JSON / Visual toggle (same pattern as report view mode) -->\n      <div class=\"studio-editor-tabs\">\n        <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n          <ax-button-group-item (onClick)=\"switchTab('json')\" text=\"{{ '@workflow-management:workflow-studio.terms.json-editor' | translate | async }}\" [selected]=\"activeTab() === 'json'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-code\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n          <ax-button-group-item (onClick)=\"switchTab('visual')\" text=\"{{ '@workflow-management:workflow-studio.terms.visual-designer' | translate | async }}\" [selected]=\"activeTab() === 'visual'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-diagram-project\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n        </ax-button-group>\n      </div>\n    </axp-layout-prefix>\n  </axp-page-toolbar>\n\n  <axp-page-content>\n    <div class=\"workflow-studio\">\n      <!-- Main Layout -->\n      <div class=\"studio-body\" [class.properties-hidden]=\"!showPropertiesPanel()\">\n\n        <!-- Editor -->\n        <div class=\"studio-editor\">\n          <!-- Tab Content -->\n          <div class=\"editor-content\">\n            <!-- JSON Tab -->\n            @if (activeTab() === 'json') {\n            <div class=\"json-tab\">\n              <textarea class=\"json-editor\" [value]=\"workflowJson()\"\n                (input)=\"onWorkflowJsonInput($event)\"\n                [placeholder]=\"'@workflow-management:workflow-studio.components.json-editor.placeholder' | translate | async\"\n                spellcheck=\"false\"></textarea>\n            </div>\n            }\n\n            <!-- Visual Tab -->\n            @if (activeTab() === 'visual') {\n            <div class=\"visual-tab\">\n              <!-- Canvas -->\n              <div class=\"visual-canvas\">\n                <div class=\"canvas-toolbar\">\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.zoom-to-fit.title' | translate | async\" (onClick)=\"canvasZoomToFit()\">\n                    <ax-prefix><i class=\"fa-light fa-expand\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.center.title' | translate | async\" (onClick)=\"canvasCenter()\">\n                    <ax-prefix><i class=\"fa-light fa-crosshairs\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.auto-layout.title' | translate | async\" (onClick)=\"canvasAutoLayout()\">\n                    <ax-prefix><i class=\"fa-light fa-sitemap\"></i></ax-prefix>\n                  </ax-button>\n                  <span class=\"toolbar-sep\"></span>\n                  <label class=\"toolbar-auto-save\">\n                    <ax-switch [value]=\"autoSaveEnabled()\" (valueChange)=\"autoSaveEnabled.set($event)\"></ax-switch>\n                    <span>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.auto-save' | translate | async }}</span>\n                  </label>\n                  <span class=\"toolbar-sep\"></span>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.clear-canvas.title' | translate | async\" (onClick)=\"clearCanvas()\">\n                    <ax-prefix><i class=\"fa-light fa-trash\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.convert-to-json.title' | translate | async\" (onClick)=\"visualToJson()\">\n                    <ax-prefix><i class=\"fa-light fa-code\"></i></ax-prefix>\n                  </ax-button>\n                  <span class=\"tool-info\">\n                    <i class=\"fa-light fa-lightbulb\"></i>\n                    <strong>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.hint' | translate | async }}</strong>\n                  </span>\n                </div>\n\n                <div #canvasAreaRef class=\"canvas-area\" (drop)=\"onCanvasDrop($event)\" (dragover)=\"onCanvasDragOver($event)\"\n                  (dragleave)=\"onCanvasDragLeave($event)\">\n                  <!-- SVG for Connections -->\n                  <svg class=\"connections-layer\">\n                    <!-- Outcome-based Connections -->\n                    @for (node of visualNodes(); track node.id) {\n                    @if (node.outcomeConnections && node.outcomeConnections.length > 0) {\n                    @for (conn of node.outcomeConnections; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <g class=\"outcome-connection-group\">\n                      <line [attr.x1]=\"node.position.x + 75\" [attr.y1]=\"node.position.y + 80\"\n                        [attr.x2]=\"targetNode.position.x + 75\" [attr.y2]=\"targetNode.position.y - 50\"\n                        class=\"connection-line outcome-line\" [attr.stroke]=\"getOutcomeColor(conn.outcome)\"\n                        stroke-width=\"2.5\"\n                        [attr.marker-end]=\"'url(#arrowhead-' + getOutcomeColorName(conn.outcome) + ')'\"\n                        style=\"cursor: pointer\" (dblclick)=\"disconnectNodes(node.id, conn.targetNodeId, conn.outcome)\"\n                        [attr.title]=\"'Outcome: ' + conn.outcome + ' (Double-click to remove)'\">\n                        <title>{{ conn.outcome }} \u00E2\u2020\u2019 {{ targetNode.name }}</title>\n                      </line>\n                      <text [attr.x]=\"(node.position.x + targetNode.position.x) / 2 + 75\"\n                        [attr.y]=\"(node.position.y + targetNode.position.y) / 2 + 15\" class=\"connection-label\"\n                        text-anchor=\"middle\" dominant-baseline=\"middle\" [attr.fill]=\"getOutcomeColor(conn.outcome)\" font-size=\"11\"\n                        font-weight=\"600\" pointer-events=\"none\">\n                        {{ conn.outcome }}\n                      </text>\n                    </g>\n                    }\n                    }\n                    } @else {\n                    <!-- Simple Connections (backward compatibility) -->\n                    @for (targetId of node.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    @let sx = node.position.x + 75;\n                    @let sy = node.position.y + 40;\n                    @let tx = targetNode.position.x + 75;\n                    @let ty = targetNode.position.y - 50;\n                    @let pathD = getConnectionPath(sx, sy, tx, ty);\n                    <g class=\"connection-group\">\n                      <path [attr.d]=\"pathD\" class=\"connection-line connection-hit\" fill=\"none\" stroke=\"transparent\"\n                        stroke-width=\"16\" pointer-events=\"stroke\" (dblclick)=\"disconnectNodes(node.id, targetId)\">\n                      </path>\n                      <path [attr.d]=\"pathD\" class=\"connection-line\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"2\"\n                        stroke-linecap=\"round\" marker-end=\"url(#arrowhead-default)\" pointer-events=\"none\">\n                      </path>\n                      <title>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.connection-remove-hint' | translate | async }}</title>\n                    </g>\n                    }\n                    }\n                    }\n                    }\n\n                    <defs>\n                      <!-- Arrow markers: larger, rounded tip on line end (refX so tip touches path end) -->\n                      <marker id=\"arrowhead-default\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#64748b\" />\n                      </marker>\n                      <marker id=\"arrowhead-primary\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#8b5cf6\" />\n                      </marker>\n                      <marker id=\"arrowhead-success\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#10b981\" />\n                      </marker>\n                      <marker id=\"arrowhead-error\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#ef4444\" />\n                      </marker>\n                      <marker id=\"arrowhead-warning\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#f59e0b\" />\n                      </marker>\n                      <marker id=\"arrowhead-info\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#3b82f6\" />\n                      </marker>\n                    </defs>\n                  </svg>\n\n                  <!-- Nodes -->\n                  @for (node of visualNodes(); track node.id) {\n                  <div class=\"visual-node\" [class.selected]=\"selectedNode()?.id === node.id\"\n                    [style.left.px]=\"node.position.x\" [style.top.px]=\"node.position.y\" [attr.data-node-id]=\"node.id\"\n                    draggable=\"true\" (dragstart)=\"onNodeDragStart($event, node)\" (drag)=\"onNodeDrag($event, node)\"\n                    (dragend)=\"onNodeDragEnd($event, node)\" (click)=\"selectNodeById(node)\">\n                    <div class=\"node-header\">\n                      <i [class]=\"node.icon\"></i>\n                      <span>{{ node.name }}</span>\n                      <span class=\"node-delete-wrap\" (click)=\"$event.stopPropagation()\">\n                        <ax-button look=\"blank\" size=\"sm\" class=\"node-delete\" (onClick)=\"deleteNodeFromCanvas(node.id)\">\n                          <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                        </ax-button>\n                      </span>\n                    </div>\n\n                    <div class=\"node-body\">\n                      <small>{{ node.type }}</small>\n                    </div>\n\n                    <div class=\"node-connectors\">\n                      <!-- Input Connector -->\n                      <div class=\"connector connector-in\" title=\"Input\" (click)=\"onConnectorClick($event, node, 'in')\">\n                      </div>\n\n                      <!-- Output Connectors - Multiple outcomes support -->\n                      @if (node.outcomes && node.outcomes.length > 1) {\n                      <!-- Multiple outcomes: show separate port for each -->\n                      <div class=\"outcomes-container\">\n                        @for (outcome of node.outcomes; track outcome; let idx = $index) {\n                        <div class=\"outcome-connector\" [class.active]=\"\n                                connectionSource?.node?.id === node.id && connectionSource?.outcome === outcome\n                              \" [attr.data-outcome]=\"outcome\" [title]=\"'Output: ' + outcome\"\n                          (click)=\"onOutcomeConnectorClick($event, node, outcome)\">\n                          <span class=\"outcome-label\">{{ outcome }}</span>\n                          <div class=\"outcome-dot\"></div>\n                        </div>\n                        }\n                      </div>\n                      } @else {\n                      <!-- Single outcome: show simple output connector -->\n                      <div class=\"connector connector-out\" [class.active]=\"connectionSource?.node?.id === node.id\"\n                        title=\"Output\" (click)=\"onConnectorClick($event, node, 'out')\"></div>\n                      }\n                    </div>\n                  </div>\n                  }\n\n                  <!-- Empty State -->\n                  @if (visualNodes().length === 0) {\n                  <div class=\"canvas-empty-state\">\n                    <i class=\"fa-light fa-diagram-project\"></i>\n                    <p>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.title' | translate | async }}</p>\n                    <small>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.description' | translate | async }}</small>\n                  </div>\n                  }\n                </div>\n              </div>\n\n              <!-- Workflow Panel (when no node selected, Elsa-style) -->\n              @if (!selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel workflow-panel\">\n                <div class=\"properties-header\">\n                  <i class=\"fa-light fa-diagram-project\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.workflow-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.metadata' | translate | async }}</h5>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.name' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().name\" [disabled]=\"true\" />\n                    </div>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.description' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().description\" [disabled]=\"true\" />\n                    </div>\n                  </section>\n                  <div class=\"properties-divider\"></div>\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.information' | translate | async }}</h5>\n                    <div class=\"workflow-info-table\">\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.definition-id' | translate | async }}</span>\n                        <span class=\"info-actions\">\n                          <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.workflow-panel.copy' | translate | async\" (onClick)=\"copyDefinitionIdToClipboard()\">\n                            <ax-prefix><i class=\"fa-light fa-copy\"></i></ax-prefix>\n                          </ax-button>\n                        </span>\n                        <span class=\"info-value\">{{ workflowSettings().definitionId || 'new-workflow' }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.version' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().version }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.status' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().isPublished ? ('@workflow-management:workflow-studio.components.workflow-panel.published' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.draft' | translate | async) }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.usable-as-activity' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().usableAsActivity ? ('@general:terms.common.yes-no.yes' | translate | async) : ('@general:terms.common.yes-no.no' | translate | async) }}</span>\n                      </div>\n                    </div>\n                  </section>\n                  <p class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.workflow-panel.settings-hint' | translate | async }}</p>\n                </div>\n              </div>\n              }\n\n              <!-- Properties Panel (when a node is selected) -->\n              @if (selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel\">\n                    <div class=\"properties-header\">\n                  <i class=\"fa-light fa-sliders\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.properties-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close' | translate | async\" (onClick)=\"selectedNode.set(null)\">\n                      <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  @if (propertyViewerTabs().length > 0) {\n                  <div class=\"properties-widget-section\">\n                    <axp-property-viewer\n                      #propertyViewerRef\n                      [tabsInput]=\"propertyViewerTabs()\"\n                      [mode]=\"'simple'\"\n                      (onChanged)=\"onPropertyViewerChanged($event)\">\n                    </axp-property-viewer>\n                  </div>\n                  } @else {\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.id' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.id\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.type' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.type\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.name' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.name\"\n                      (valueChange)=\"updateNodeProperty(selectedNode()!.id, 'name', $event)\" />\n                  </div>\n                  <p class=\"no-properties\">\n                    {{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-properties' | translate | async }}\n                  </p>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n\n                  <h5>\u00F0\u0178\u201D\u2014 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections-hint' | translate | async }}</small>\n\n                  <!-- Outcome-based Connections -->\n                  @if (selectedNode()!.outcomeConnections && selectedNode()!.outcomeConnections!.length > 0) {\n                  <div class=\"connections-list\">\n                    @for (conn of selectedNode()!.outcomeConnections!; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <div class=\"connection-item outcome-connection\">\n                      <span class=\"outcome-badge\" [style.background]=\"getOutcomeColor(conn.outcome)\">\n                        {{ conn.outcome }}\n                      </span>\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, conn.targetNodeId, conn.outcome)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else if (selectedNode()!.connections.length > 0) {\n                  <!-- Simple Connections (fallback) -->\n                  <div class=\"connections-list\">\n                    @for (targetId of selectedNode()!.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    <div class=\"connection-item\">\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, targetId)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else {\n                  <p class=\"no-properties\">{{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-connections' | translate | async }}</p>\n                  }\n\n                  <!-- Available Outcomes Info -->\n                  @if (selectedNode()!.outcomes && selectedNode()!.outcomes!.length > 1) {\n                  <div class=\"properties-divider\"></div>\n                  <h5>\u00F0\u0178\u201C\u00A4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes-hint' | translate | async }}</small>\n                  <div class=\"outcomes-info\">\n                    @for (outcome of selectedNode()!.outcomes!; track outcome) {\n                    <span class=\"outcome-tag\" [style.borderColor]=\"getOutcomeColor(outcome)\">\n                      <span class=\"outcome-dot\" [style.background]=\"getOutcomeColor(outcome)\"></span>\n                      {{ outcome }}\n                    </span>\n                    }\n                  </div>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\u00F0\u0178\u201C\u009D {{ '@workflow-management:workflow-studio.components.properties-panel.sections.raw-json' | translate | async }}</h5>\n                  <pre class=\"properties-json\">{{ selectedNode() | json }}</pre>\n                </div>\n              </div>\n              }\n\n              <!-- Toggle Button for Properties (when closed) -->\n              @if (!showPropertiesPanel()) {\n              <ax-button look=\"blank\" class=\"sidebar-toggle-btn right\" (onClick)=\"togglePropertiesPanel()\"\n                [title]=\"selectedNode() ? ('@workflow-management:workflow-studio.components.properties-panel.actions.show-panel' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.show-panel' | translate | async)\">\n                <ax-prefix><i class=\"fa-light fa-sliders\"></i></ax-prefix>\n              </ax-button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n\n      </div>\n\n      <!-- Workflow Settings: opened via Layout Builder dialog in openWorkflowSettings() -->\n\n      <!-- Workflow Execution Dialog -->\n      @if (showExecutionDialog()) {\n      <div class=\"execution-dialog-overlay\" (click)=\"closeExecutionDialog()\">\n        <div class=\"execution-dialog\" (click)=\"$event.stopPropagation()\">\n          <!-- Dialog Header -->\n          <div class=\"execution-dialog-header\">\n            <div class=\"header-content\">\n              <i class=\"fa-light fa-play-circle\"></i>\n              <div class=\"header-info\">\n                <h2>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.title' | translate |\n                  async }}</h2>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.description' | translate\n                  | async }}</p>\n              </div>\n            </div>\n            <ax-button look=\"blank\" size=\"sm\" class=\"close-btn\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n            </ax-button>\n          </div>\n\n          <!-- Dialog Body -->\n          <div class=\"execution-dialog-body\">\n            <!-- Workflow Info Panel (Before Execution) -->\n            @if (!workflowInstanceState()) {\n            <div class=\"workflow-info-panel\">\n              <div class=\"start-section\">\n                <div class=\"start-illustration\">\n                  <i class=\"fa-light fa-rocket\"></i>\n                </div>\n                <h3>{{ '@workflow-management:test-pages.workflow-studio.messages.info.ready-to-execute' | translate |\n                  async }}</h3>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.messages.info.click-to-start' | translate | async\n                  }}</p>\n                <ax-button\n                  [text]=\"'@workflow-management:test-pages.workflow-studio.actions.start-execution.title' | translate | async\"\n                  color=\"success\" size=\"lg\" (onClick)=\"startWorkflowExecution()\">\n                </ax-button>\n              </div>\n            </div>\n            }\n\n\n            <!-- Custom UI for Registration -->\n            @if (false) {\n            <div class=\"registration-ui\">\n              <div class=\"registration-card\">\n                <div class=\"registration-icon\">\n                  <i class=\"fa-light fa-user-circle\"></i>\n                </div>\n                <h3>\u00D9\u0081\u00D8\u00B1\u00D8\u00A2\u00DB\u0152\u00D9\u2020\u00D8\u00AF \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026</h3>\n                <p class=\"registration-desc\">\n                  \u00D8\u00A7\u00DB\u0152\u00D9\u2020 \u00D9\u0081\u00D9\u201E\u00D9\u02C6 \u00D8\u00B4\u00D8\u00A7\u00D9\u2026\u00D9\u201E \u00DA\u2020\u00D9\u2020\u00D8\u00AF \u00D9\u2026\u00D8\u00B1\u00D8\u00AD\u00D9\u201E\u00D9\u2021 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA \u00DA\u00A9\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00AF\u00D9\u2021\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1 \u00D8\u00B1\u00D8\u00A7 \u00D8\u00AC\u00D9\u2026\u00D8\u00B9\u00E2\u20AC\u0152\u00D8\u00A2\u00D9\u02C6\u00D8\u00B1\u00DB\u0152 \u00DA\u00A9\u00D8\u00B1\u00D8\u00AF\u00D9\u2021 \u00D9\u02C6 \u00D8\u00AF\u00D8\u00B1 \u00D9\u2020\u00D9\u2021\u00D8\u00A7\u00DB\u0152\u00D8\u00AA \u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D9\u2026\u00DB\u0152\u00E2\u20AC\u0152\u00DA\u00A9\u00D9\u2020\u00D8\u00AF.\n                </p>\n\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"registration-progress\">\n                  <div class=\"progress-spinner\">\n                    <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  </div>\n                  <p>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7\u00DB\u0152 \u00D9\u2026\u00D8\u00B1\u00D8\u00A7\u00D8\u00AD\u00D9\u201E \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026...</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"registration-success\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h4>\u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF!</h4>\n                  <p>\u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00B4\u00D9\u2026\u00D8\u00A7 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00A8\u00D9\u2021 \u00D8\u00B2\u00D9\u02C6\u00D8\u00AF\u00DB\u0152 \u00D8\u00A8\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00B4\u00D8\u00A8\u00D9\u02C6\u00D8\u00B1\u00D8\u00AF \u00D9\u2026\u00D9\u2020\u00D8\u00AA\u00D9\u201A\u00D9\u201E \u00D8\u00AE\u00D9\u02C6\u00D8\u00A7\u00D9\u2021\u00DB\u0152\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF.</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Default Execution View -->\n            @if (workflowInstanceState()) {\n            <div class=\"default-execution-view\">\n              <div class=\"execution-status\">\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"status-running\">\n                  <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  <h3>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7...</h3>\n                  <p>Workflow \u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA. \u00D9\u201E\u00D8\u00B7\u00D9\u0081\u00D8\u00A7\u00D9\u2039 \u00D8\u00B5\u00D8\u00A8\u00D8\u00B1 \u00DA\u00A9\u00D9\u2020\u00DB\u0152\u00D8\u00AF.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"status-finished\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h3>\u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00AA\u00DA\u00A9\u00D9\u2026\u00DB\u0152\u00D9\u201E \u00D8\u00B4\u00D8\u00AF</h3>\n                  <p>Workflow \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00AA\u00D9\u2026\u00D8\u00A7\u00D9\u2026 Activities \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF\u00D9\u2020\u00D8\u00AF.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'error') {\n                <div class=\"status-error\">\n                  <i class=\"fa-light fa-times-circle\"></i>\n                  <h3>\u00D8\u00AE\u00D8\u00B7\u00D8\u00A7 \u00D8\u00AF\u00D8\u00B1 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</h3>\n                  <p>{{ workflowInstanceState()?.error }}</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Execution Logs Panel -->\n            @if (workflowInstanceState() && executionLogs().length > 0) {\n            <div class=\"execution-logs-panel\">\n              <h3><i class=\"fa-light fa-terminal\"></i> \u00D9\u201E\u00D8\u00A7\u00DA\u00AF\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</h3>\n              <div class=\"logs-container-compact\">\n                @for (log of executionLogs(); track $index) {\n                <div class=\"log-item-compact\" [class]=\"'log-' + log.level\">\n                  <span class=\"log-time\">{{ log.timestamp | date: 'HH:mm:ss' }}</span>\n                  <span class=\"log-icon\">\n                    @switch (log.level) {\n                    @case ('info') {\n                    <i class=\"fa-light fa-info-circle\"></i>\n                    }\n                    @case ('success') {\n                    <i class=\"fa-light fa-check-circle\"></i>\n                    }\n                    @case ('warning') {\n                    <i class=\"fa-light fa-exclamation-triangle\"></i>\n                    }\n                    @case ('error') {\n                    <i class=\"fa-light fa-times-circle\"></i>\n                    }\n                    }\n                  </span>\n                  <span class=\"log-message\">{{ log.message }}</span>\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- Dialog Footer -->\n          <div class=\"execution-dialog-footer\">\n            <div class=\"footer-info\">\n              @if (workflowInstanceState()?.startTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-clock\"></i>\n                \u00D8\u00B4\u00D8\u00B1\u00D9\u02C6\u00D8\u00B9: {{ workflowInstanceState()!.startTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n              @if (workflowInstanceState()?.endTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-flag-checkered\"></i>\n                \u00D9\u00BE\u00D8\u00A7\u00DB\u0152\u00D8\u00A7\u00D9\u2020: {{ workflowInstanceState()!.endTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <ax-button\n                [text]=\"(workflowInstanceState() ? '@general:actions.close.title' : '@general:actions.cancel.title') | translate | async\"\n                color=\"secondary\" size=\"md\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              </ax-button>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>\n", styles: [".sidebar-header .toggle-btn{padding:.5rem;margin-left:auto;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;transition:all .2s}.sidebar-header .toggle-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.sidebar-header .toggle-btn i{font-size:.875rem}.sidebar-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:100;padding:1rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#8b5cf6;cursor:pointer;box-shadow:0 4px 12px #0000001a;transition:all .3s}.sidebar-toggle-btn:hover{background:#8b5cf6;color:#fff;box-shadow:0 8px 24px #8b5cf64d;transform:translateY(-50%) scale(1.1)}.sidebar-toggle-btn.left{left:0;border-left:none;border-radius:0 8px 8px 0}.sidebar-toggle-btn.right{right:0;border-right:none;border-radius:8px 0 0 8px}.sidebar-toggle-btn i{font-size:1.25rem;display:block}.properties-header .header-actions{display:flex;gap:.5rem;margin-left:auto}.properties-header .header-btn{padding:.375rem .5rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;cursor:pointer;transition:all .2s}.properties-header .header-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.properties-header .header-btn i{font-size:.75rem}.connections-list{margin-top:.75rem}.connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.connection-item i{color:#8b5cf6}.connection-item span{flex:1;color:#1e293b}.connection-item .remove-btn{padding:.25rem .375rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#ef4444;cursor:pointer;transition:all .2s}.connection-item .remove-btn:hover{background:#fef2f2;border-color:#ef4444}.connection-item .remove-btn i{font-size:.75rem;color:inherit}.property-editor{margin-top:.75rem}.property-editor .property-row label{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.property-editor .property-row label .property-type-badge{padding:.125rem .375rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;font-size:.625rem;font-weight:400;color:#64748b;text-transform:lowercase;font-family:JetBrains Mono,monospace}.property-editor .property-row select{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;background:#fff;cursor:pointer;transition:all .2s}.property-editor .property-row select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.property-editor .property-row textarea{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem;font-family:JetBrains Mono,monospace;color:#1e293b;resize:vertical;transition:all .2s}.property-editor .property-row textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.workflow-studio{display:flex;flex-direction:column;height:100vh;background:#f8fafc;overflow:hidden}.studio-editor-tabs ax-button-group-item[selected],.studio-editor-tabs ax-button-group-item.ax-selected{font-weight:600;opacity:1}.workflow-popup .popup-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}.workflow-popup .popup-header h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem;font-weight:700}.workflow-popup .popup-header p{margin:0;color:#64748b;font-size:.95rem}.workflow-popup .popup-body{max-height:60vh;overflow-y:auto;padding:0 .5rem}.workflow-popup .popup-body h4{margin:1.5rem 0 .75rem;color:#374151;font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.workflow-popup .popup-body ul{margin:0;padding-left:1.5rem}.workflow-popup .popup-body ul li{margin-bottom:.5rem;color:#4b5563}.workflow-popup .popup-body ul li strong{color:#1f2937}.workflow-popup .workflow-info{background:#f8fafc;padding:1rem;border-radius:8px;border:1px solid #e2e8f0}.workflow-popup .workflow-variables{background:#fef3c7;padding:1rem;border-radius:8px;border:1px solid #f59e0b}.workflow-popup .workflow-flow{background:#ecfdf5;padding:1rem;border-radius:8px;border:1px solid #10b981}.workflow-popup .workflow-flow .flow-steps{display:flex;flex-direction:column;gap:.75rem}.workflow-popup .workflow-flow .flow-steps .flow-step{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#fff;border-radius:6px;border:1px solid #d1d5db}.workflow-popup .workflow-flow .flow-steps .flow-step .step-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;color:#fff;border-radius:50%;font-size:.8rem;font-weight:600}.workflow-popup .workflow-flow .flow-steps .flow-step .step-text{color:#374151;font-weight:500}.workflow-popup .workflow-json{background:#1f2937;padding:1rem;border-radius:8px;border:1px solid #374151}.workflow-popup .workflow-json .json-preview{background:transparent;color:#e5e7eb;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto}.workflow-popup .popup-footer{text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}.workflow-popup .popup-footer .btn{padding:.75rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background-color .2s}.workflow-popup .popup-footer .btn:hover{background:#2563eb}.workflow-popup .popup-footer .btn i{font-size:.9rem}.view-workflow-link{color:#3b82f6;text-decoration:none;font-size:.85rem;margin-left:.5rem;transition:color .2s}.view-workflow-link:hover{color:#1d4ed8;text-decoration:underline}.studio-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d}.studio-header .header-title{display:flex;align-items:center;gap:.75rem}.studio-header .header-title i{font-size:1.75rem;color:#8b5cf6}.studio-header .header-title h1{margin:0;font-size:1.5rem;font-weight:700;color:#1e293b}.studio-header .header-title .badge{padding:.25rem .75rem;background:#8b5cf6;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600}.studio-header .header-actions{display:flex;gap:.75rem;align-items:center}.samples-dropdown{position:relative}.samples-dropdown .samples-menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:320px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 25px #0000001a;z-index:1000;max-height:400px;overflow-y:auto}.samples-dropdown .samples-menu .sample-item{padding:.875rem 1rem;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:all .2s}.samples-dropdown .samples-menu .sample-item:last-child{border-bottom:none}.samples-dropdown .samples-menu .sample-item:hover{background:#f8fafc;transform:translate(4px)}.samples-dropdown .samples-menu .sample-item i{font-size:1.25rem;margin-top:.125rem;color:#8b5cf6}.samples-dropdown .samples-menu .sample-item .sample-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.samples-dropdown .samples-menu .sample-item .sample-info strong{color:#1e293b;font-size:.875rem;font-weight:600}.samples-dropdown .samples-menu .sample-item .sample-info span{color:#64748b;font-size:.75rem;line-height:1.4}.studio-body{display:grid;grid-template-columns:1fr;gap:0;flex:1;overflow:hidden;transition:grid-template-columns .3s ease}.studio-body.sidebar-hidden,.studio-body.properties-hidden,.studio-body.sidebar-hidden.properties-hidden{grid-template-columns:1fr}.studio-sidebar{background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}.studio-sidebar .sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-sidebar .sidebar-header i{font-size:1.25rem;color:#8b5cf6}.studio-sidebar .sidebar-header h3{flex:1;margin:0;font-size:1.125rem;font-weight:600;color:#1e293b}.activities-tree{flex:1;overflow-y:auto;padding:.5rem}.category-section{margin-bottom:.5rem}.category-section .category-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s;background:#f8fafc}.category-section .category-header:hover{background:#f1f5f9}.category-section .category-header.active{background:#ede9fe}.category-section .category-header.active>i:first-child{color:#8b5cf6}.category-section .category-header>i:first-child{font-size:.875rem;color:#94a3b8;transition:transform .2s,color .2s}.category-section .category-header>i:nth-child(2){font-size:1.125rem}.category-section .category-header span{flex:1;font-weight:600;font-size:.875rem;color:#334155}.category-section .category-header .count{flex:none;padding:.125rem .5rem;background:#fff;border-radius:10px;font-size:.75rem;font-weight:600;color:#64748b;border:1px solid #e2e8f0}.activities-list{padding:.5rem 0 .5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;animation:slideDown .3s ease}.activities-list .activities-header{padding:.5rem .75rem;margin-bottom:.5rem}.activities-list .activities-header h4{margin:0;font-size:.875rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.activity-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.875rem;margin-bottom:.75rem;transition:all .2s}.activity-card:hover{border-color:#8b5cf6;box-shadow:0 4px 12px #8b5cf61a;transform:translateY(-1px)}.activity-card .activity-info{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}.activity-card .activity-info>i{font-size:1.5rem;color:#8b5cf6;margin-top:.125rem}.activity-card .activity-info .activity-details{flex:1;display:flex;flex-direction:column;gap:.25rem}.activity-card .activity-info .activity-details strong{font-size:.875rem;color:#1e293b}.activity-card .activity-info .activity-details small{font-size:.75rem;color:#64748b;line-height:1.4}.activity-card .activity-info .activity-details code{font-size:.75rem;color:#8b5cf6;background:#f3f0ff;padding:.125rem .375rem;border-radius:4px;width:fit-content}.activity-card .copy-btn{float:right;padding:.375rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;color:#64748b}.activity-card .copy-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.activity-card .copy-btn i{font-size:.875rem}.activity-card .activity-properties{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f1f5f9}.activity-card .activity-properties .properties-title{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.5rem}.activity-card .activity-properties .property-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.75rem}.activity-card .activity-properties .property-item code{color:#1e293b;background:#f8fafc;padding:.125rem .375rem;border-radius:3px}.activity-card .activity-properties .property-item .property-type{color:#64748b;font-style:italic}.activity-card .activity-properties .property-item .required{color:#ef4444;font-weight:700}.studio-editor{display:flex;flex-direction:column;background:#1e293b;overflow:hidden}.studio-editor .editor-header{padding:1rem 1.25rem;background:#0f172a;display:flex;align-items:center;gap:.5rem}.studio-editor .editor-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .editor-header h3{margin:0;font-size:1rem;font-weight:600;color:#e2e8f0}.studio-editor axp-page-toolbar .editor-tabs{display:flex;gap:.5rem;background:transparent}.studio-editor axp-page-toolbar .editor-tabs .tab-btn{padding:.5rem 1rem;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn i{font-size:.875rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#475569}.studio-editor axp-page-toolbar .editor-tabs .tab-btn.active{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .editor-content{flex:1;display:flex;overflow:hidden}.studio-editor .json-tab{flex:1;display:flex;flex-direction:column}.studio-editor .json-editor{flex:1;padding:1.5rem;background:#1e293b;color:#e2e8f0;border:none;outline:none;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem;line-height:1.6;resize:none;overflow:auto}.studio-editor .json-editor::placeholder{color:#475569}.studio-editor .json-editor::-webkit-scrollbar{width:10px;height:10px}.studio-editor .json-editor::-webkit-scrollbar-track{background:#0f172a}.studio-editor .json-editor::-webkit-scrollbar-thumb{background:#475569;border-radius:5px}.studio-editor .json-editor::-webkit-scrollbar-thumb:hover{background:#64748b}.studio-editor .visual-tab{flex:1;display:flex;background:#f8fafc;position:relative}.studio-editor .visual-canvas{flex:1;display:flex;flex-direction:column;overflow:hidden}.studio-editor .visual-canvas .canvas-toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--ax-surface, white);border-bottom:1px solid var(--ax-border, #e2e8f0)}.studio-editor .visual-canvas .canvas-toolbar .tool-btn{padding:.5rem .75rem;background:var(--ax-surface-alt, #f8fafc);border:1px solid var(--ax-border, #e2e8f0);border-radius:6px;color:var(--ax-text-muted, #64748b);cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .canvas-toolbar .tool-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .visual-canvas .canvas-toolbar .tool-btn i{font-size:.875rem}.studio-editor .visual-canvas .canvas-toolbar .toolbar-sep{width:1px;height:1.25rem;background:var(--ax-border, #e2e8f0);flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);cursor:default}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save ax-switch{flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .tool-info{flex:1;display:flex;align-items:center;gap:.5rem;min-height:1.75rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);line-height:1.4}.studio-editor .visual-canvas .canvas-toolbar .tool-info strong{font-weight:600}.studio-editor .visual-canvas .canvas-toolbar .tool-info i{font-size:1rem;color:#8b5cf6;flex-shrink:0}.studio-editor .visual-canvas .canvas-area{flex:1;position:relative;background:linear-gradient(90deg,#e5e7eb 1px,transparent 1px),linear-gradient(#e5e7eb 1px,transparent 1px);background-size:20px 20px;overflow:auto;min-height:600px}.studio-editor .visual-canvas .connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.studio-editor .visual-canvas .connection-line{fill:none;transition:stroke .2s}.studio-editor .visual-canvas .connection-line.connection-hit{stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}.studio-editor .visual-canvas .connection-line.connection-hit:hover~.outcome-line,.studio-editor .visual-canvas .connection-line.connection-hit:hover~.connection-line:not(.connection-hit){filter:brightness(.9)}.studio-editor .visual-canvas .connection-line:not(.connection-hit){stroke-linecap:round;pointer-events:none}.studio-editor .visual-canvas .connection-line.outcome-line{stroke-width:2.5}.studio-editor .visual-canvas .visual-node{position:absolute;width:150px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;box-shadow:0 2px 8px #0000001a;cursor:move;transition:all .2s;z-index:2}.studio-editor .visual-canvas .visual-node:hover{border-color:#8b5cf6;box-shadow:0 4px 16px #8b5cf633;transform:translateY(-2px)}.studio-editor .visual-canvas .visual-node.selected{border-color:#8b5cf6;border-width:3px;box-shadow:0 0 0 3px #8b5cf633}.studio-editor .visual-canvas .visual-node .node-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-radius:6px 6px 0 0;font-size:.875rem;font-weight:600}.studio-editor .visual-canvas .visual-node .node-header i{font-size:1rem}.studio-editor .visual-canvas .visual-node .node-header span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-editor .visual-canvas .visual-node .node-header .node-delete{padding:.25rem;background:#fff3;border:none;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .visual-node .node-header .node-delete:hover{background:#ef4444cc}.studio-editor .visual-canvas .visual-node .node-header .node-delete i{font-size:.75rem}.studio-editor .visual-canvas .visual-node .node-body{padding:.75rem}.studio-editor .visual-canvas .visual-node .node-body small{display:block;font-size:.75rem;color:#64748b;text-align:center}.studio-editor .visual-canvas .visual-node .node-connectors{position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .connector{position:absolute;width:12px;height:12px;background:#8b5cf6;border:2px solid white;border-radius:50%;cursor:pointer;transition:all .2s;z-index:10}.studio-editor .visual-canvas .visual-node .node-connectors .connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.studio-editor .visual-canvas .visual-node .node-connectors .connector-in{top:-50px;left:50%;transform:translate(-50%);background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out{bottom:-6px;left:50%;transform:translate(-50%);background:#8b5cf6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out.active{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container{position:absolute;bottom:-60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;background:#fff;padding:8px;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:120px;z-index:100}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container:before{content:\"\";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;filter:drop-shadow(0 -2px 2px rgba(0,0,0,.05))}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector:hover{background:#f1f5f9;border-color:#8b5cf6;transform:translate(2px)}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active{background:#fef2f2;border-color:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active .outcome-dot{background:#ef4444;box-shadow:0 0 0 3px #ef444433}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-label{font-size:.75rem;font-weight:600;color:#475569;-webkit-user-select:none;user-select:none;flex:1}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-dot{width:10px;height:10px;background:#8b5cf6;border:2px solid white;border-radius:50%;transition:all .2s;flex-shrink:0}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"200\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Done] .outcome-dot{background:#10b981}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"404\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Failed] .outcome-dot{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Timeout] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Cancelled] .outcome-dot{background:#f59e0b}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Then] .outcome-dot{background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Else] .outcome-dot{background:#64748b}.studio-editor .visual-canvas .canvas-empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.studio-editor .visual-canvas .canvas-empty-state i{font-size:4rem;margin-bottom:1rem;opacity:.5}.studio-editor .visual-canvas .canvas-empty-state p{margin:0 0 .5rem;font-size:1rem;font-weight:500}.studio-editor .visual-canvas .canvas-empty-state small{font-size:.875rem;opacity:.8}.studio-editor .properties-panel{width:280px;background:#fff;border-left:1px solid #e2e8f0;display:flex;flex-direction:column}.studio-editor .properties-panel .properties-header{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid #e2e8f0}.studio-editor .properties-panel .properties-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .properties-panel .properties-header h4{flex:1;margin:0;font-size:.875rem;font-weight:600;color:#1e293b}.studio-editor .properties-panel .properties-header button{padding:.25rem .5rem;background:transparent;border:none;color:#64748b;cursor:pointer;transition:color .2s}.studio-editor .properties-panel .properties-header button:hover{color:#ef4444}.studio-editor .properties-panel .properties-body{flex:1;padding:1rem;overflow-y:auto}.studio-editor .properties-panel .properties-body .properties-widget-section{min-height:0}.studio-editor .properties-panel .properties-body .workflow-panel-section{margin-bottom:1.5rem}.studio-editor .properties-panel .properties-body .workflow-panel-section h5{margin:0 0 .75rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group{margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group label{font-size:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group input,.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group textarea{font-size:.8125rem}.studio-editor .properties-panel .properties-body .workflow-info-table{display:flex;flex-direction:column;gap:.5rem}.studio-editor .properties-panel .properties-body .workflow-info-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #f1f5f9}.studio-editor .properties-panel .properties-body .workflow-info-row:last-child{border-bottom:none}.studio-editor .properties-panel .properties-body .info-label{font-size:.8125rem;font-weight:500;color:#64748b;flex-shrink:0}.studio-editor .properties-panel .properties-body .info-value{font-size:.8125rem;color:#1e293b;text-align:right;word-break:break-all}.studio-editor .properties-panel .properties-body .info-actions{display:flex;align-items:center;gap:.5rem}.studio-editor .properties-panel .properties-body .property-row{margin-bottom:1rem}.studio-editor .properties-panel .properties-body .property-row label{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .property-row input{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .property-row input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.studio-editor .properties-panel .properties-body .property-row input:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.studio-editor .properties-panel .properties-body .properties-divider{height:1px;background:#e2e8f0;margin:1.5rem 0}.studio-editor .properties-panel .properties-body h5{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .properties-hint{display:block;font-size:.75rem;color:#94a3b8;margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .properties-json{margin:.75rem 0 0;padding:.75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;color:#1e293b;overflow-x:auto}.studio-editor .properties-panel .properties-body .no-properties{margin:.75rem 0 0;padding:1rem;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px;text-align:center;font-size:.75rem;color:#94a3b8}.studio-editor .properties-panel .properties-body .connections-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item.outcome-connection{border-left-width:3px}.studio-editor .properties-panel .properties-body .connections-list .connection-item i{color:#64748b;font-size:.875rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item span{flex:1;color:#1e293b;font-weight:500}.studio-editor .properties-panel .properties-body .connections-list .connection-item .outcome-badge{padding:.25rem .5rem;border-radius:4px;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn{padding:.25rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn:hover{background:#fee2e2}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn i{font-size:.75rem;color:inherit}.studio-editor .properties-panel .properties-body .outcomes-info{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:#fff;border:2px solid;border-radius:6px;font-size:.75rem;font-weight:600;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag .outcome-dot{width:8px;height:8px;border-radius:50%}.studio-result{display:flex;flex-direction:column;background:#fff;border-left:1px solid #e2e8f0;overflow:hidden}.studio-result .result-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-result .result-header i{font-size:1.125rem;color:#10b981}.studio-result .result-header h3{flex:1;margin:0;font-size:1rem;font-weight:600;color:#1e293b}.studio-result .result-header .clear-btn{padding:.375rem .75rem;background:#fee2e2;color:#dc2626;border:none;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s}.studio-result .result-header .clear-btn:hover{background:#fecaca}.studio-result .result-header .clear-btn i{font-size:.75rem;color:inherit}.studio-result .result-body{flex:1;overflow-y:auto;padding:1rem}.logs-container{display:flex;flex-direction:column;gap:.5rem}.log-item{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#f8fafc;border-left:3px solid #cbd5e1;border-radius:6px;font-size:.875rem}.log-item.log-info{border-left-color:#3b82f6;background:#eff6ff}.log-item.log-info .log-icon{color:#3b82f6}.log-item.log-success{border-left-color:#10b981;background:#f0fdf4}.log-item.log-success .log-icon{color:#10b981}.log-item.log-warning{border-left-color:#f59e0b;background:#fffbeb}.log-item.log-warning .log-icon{color:#f59e0b}.log-item.log-error{border-left-color:#ef4444;background:#fef2f2}.log-item.log-error .log-icon{color:#ef4444}.log-item .log-time{font-family:JetBrains Mono,monospace;font-size:.75rem;color:#64748b;min-width:80px}.log-item .log-icon{font-size:1rem}.log-item .log-message{flex:1;color:#1e293b}.log-item .log-data-toggle{padding:.25rem .5rem;background:transparent;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .2s}.log-item .log-data-toggle:hover{background:#fff}.log-item .log-data-toggle i{font-size:.75rem;color:#64748b}.log-data{margin:.5rem 0 0;padding:1rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto}.settings-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;padding:2rem;animation:fadeIn .2s ease}.settings-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0}.settings-modal-header .header-title{display:flex;align-items:center;gap:.75rem}.settings-modal-header .header-title i{font-size:1.5rem;color:#8b5cf6}.settings-modal-header .header-title h2{margin:0;font-size:1.25rem;font-weight:700;color:#1e293b}.settings-modal-header .close-btn{padding:.5rem;background:transparent;border:none;color:#64748b;cursor:pointer;border-radius:6px;transition:all .2s}.settings-modal-header .close-btn:hover{background:#f1f5f9;color:#ef4444}.settings-modal-header .close-btn i{font-size:1.25rem}.settings-modal-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.settings-tabs{padding:0 1.5rem}.settings-content{flex:1;overflow-y:auto;padding:2rem}.settings-section h3{margin:0 0 1.5rem;font-size:1rem;font-weight:600;color:#1e293b}.settings-section .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.settings-section .section-header h3{margin:0}.settings-section .section-header .add-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#8b5cf6;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.settings-section .section-header .add-btn:hover{background:#7c3aed;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf64d}.settings-section .section-header .add-btn i{font-size:.875rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:.875rem;font-weight:600;color:#475569;margin-bottom:.5rem}.form-group small{display:block;font-size:.75rem;color:#94a3b8;margin-top:.375rem}.form-group.checkbox-group{margin-bottom:0}.form-group.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-bottom:0}.form-group.checkbox-group label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group.checkbox-group label span{font-size:.875rem;font-weight:500}.form-group.flex-1{flex:1}.form-row{display:flex;gap:1rem;align-items:flex-start}.form-input,.form-select,.form-textarea{width:100%;padding:.625rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.form-input::placeholder,.form-select::placeholder,.form-textarea::placeholder{color:#cbd5e1}.form-textarea{resize:vertical;font-family:inherit}.items-list{display:flex;flex-direction:column;gap:1rem}.item-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s}.item-card:hover{border-color:#cbd5e1;box-shadow:0 2px 8px #0000000d}.item-card .item-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#f1f5f9;border-bottom:1px solid #e2e8f0}.item-card .item-header .item-number{font-size:.75rem;font-weight:700;color:#8b5cf6;padding:.25rem .5rem;background:#fff;border-radius:4px}.item-card .item-header .remove-btn{padding:.375rem .625rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.item-card .item-header .remove-btn:hover{background:#fee2e2}.item-card .item-header .remove-btn i{font-size:.875rem}.item-card .item-body{padding:1rem}.advanced-group{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e2e8f0}.advanced-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.advanced-group h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.5px}.outcomes-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.outcomes-preview .outcome-chip{display:inline-flex;align-items:center;padding:.375rem .75rem;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;font-size:.75rem;font-weight:600;color:#475569}.export-info{margin-top:1rem;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.export-info .info-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #e2e8f0}.export-info .info-row:last-child{border-bottom:none;padding-bottom:0}.export-info .info-row .label{font-size:.75rem;font-weight:600;color:#64748b;min-width:120px}.export-info .info-row code{flex:1;padding:.25rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:4px;font-size:.75rem;color:#1e293b;font-family:JetBrains Mono,monospace}.settings-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:1.5rem 2rem;border-top:1px solid #e2e8f0;background:#f8fafc}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;color:#94a3b8}.empty-state i{font-size:3rem;margin-bottom:1rem}.empty-state p{margin:0;font-size:.875rem}.final-result{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #e2e8f0}.final-result .result-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#f8fafc;border-radius:8px;margin-bottom:1rem;cursor:pointer;transition:all .2s}.final-result .result-header:hover{background:#f1f5f9;transform:translate(-2px)}.final-result .result-header h4{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase}.final-result .result-header h4 i{font-size:.875rem;transition:transform .2s}.final-result .result-header .toggle-hint{font-size:.75rem;color:#94a3b8}.final-result .result-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem}.final-result .result-card .result-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.final-result .result-card .result-row:not(:last-child){border-bottom:1px solid #e2e8f0}.final-result .result-card .result-row strong{font-size:.875rem;color:#475569;min-width:100px}.final-result .result-card .result-row .badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.final-result .result-card .result-row .badge.badge-running{background:#dbeafe;color:#1e40af}.final-result .result-card .result-row .badge.badge-finished{background:#d1fae5;color:#065f46}.final-result .result-card .result-row .badge.badge-cancelled{background:#fed7aa;color:#92400e}.final-result .result-card .result-row .badge.badge-faulted{background:#fee2e2;color:#991b1b}.final-result .result-card .result-row pre{margin:.5rem 0 0;padding:.75rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto;width:100%}.activities-list::-webkit-scrollbar,.result-body::-webkit-scrollbar{width:8px}.activities-list::-webkit-scrollbar-track,.result-body::-webkit-scrollbar-track{background:#f1f5f9}.activities-list::-webkit-scrollbar-thumb,.result-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.activities-list::-webkit-scrollbar-thumb:hover,.result-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.activity-card{cursor:grab}.activity-card:active{cursor:grabbing}.activity-card[draggable=true]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node[draggable=true]{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node:active{cursor:grabbing}.canvas-area[data-drag-over=true]{background-color:#8b5cf60d}.connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.connector-out.active{animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 3px #ef44444d}50%{box-shadow:0 0 0 6px #ef44441a}}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}.execution-dialog-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.execution-dialog{width:90vw;max-width:1200px;height:90vh;background:#fff;border-radius:16px;box-shadow:0 25px 50px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease}.execution-dialog-header{padding:1.5rem 2rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-header .header-content{display:flex;align-items:center;gap:1rem;flex:1}.execution-dialog-header .header-content>i{font-size:2.5rem;opacity:.9}.execution-dialog-header .header-content .header-info h2{margin:0;font-size:1.75rem;font-weight:700}.execution-dialog-header .header-content .header-info p{margin:.25rem 0 0;opacity:.9;font-size:.95rem}.execution-dialog-header .close-btn{background:#fff3;border:none;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff;font-size:1.25rem}.execution-dialog-header .close-btn:hover:not(:disabled){background:#ffffff4d;transform:scale(1.05)}.execution-dialog-header .close-btn:disabled{opacity:.5;cursor:not-allowed}.execution-dialog-body{flex:1;overflow-y:auto;padding:2rem;background:#f8fafc}.execution-dialog-footer{padding:1rem 2rem;background:#fff;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-footer .footer-info{display:flex;gap:1.5rem}.execution-dialog-footer .footer-info .time-info{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem}.execution-dialog-footer .footer-info .time-info i{color:#8b5cf6}.execution-dialog-footer .footer-actions{display:flex;gap:.75rem}.workflow-info-panel{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000000d}.workflow-info-panel .info-section{margin-bottom:2rem}.workflow-info-panel .info-section h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.25rem}.workflow-info-panel .info-section h3 i{color:#8b5cf6}.workflow-info-panel .info-section .description{color:#475569;line-height:1.7;margin:0}.workflow-info-panel .info-section .features-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.workflow-info-panel .info-section .features-list li{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#f8fafc;border-radius:8px;color:#334155}.workflow-info-panel .info-section .features-list li i{color:#10b981;font-size:1.125rem}.workflow-info-panel .start-section{text-align:center;padding:2rem;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:12px;border:2px dashed #10b981}.workflow-info-panel .start-section .start-illustration{margin-bottom:1rem}.workflow-info-panel .start-section .start-illustration i{font-size:4rem;color:#10b981;animation:float 3s ease-in-out infinite}.workflow-info-panel .start-section h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem}.workflow-info-panel .start-section p{margin:0 0 1.5rem;color:#64748b}.state-machine-ui .issue-tracker{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px #0000000d}.state-machine-ui .issue-tracker .issue-header-main{padding:1.5rem 2rem 1rem;border-bottom:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#64748b;margin-bottom:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .project-name{color:#3b82f6;font-weight:600}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .separator{color:#94a3b8}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .issue-key{color:#64748b}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title{display:flex;align-items:center;gap:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge{padding:.375rem .75rem;border-radius:4px;font-size:.8125rem;font-weight:600;display:flex;align-items:center;gap:.375rem;background:#eff6ff;color:#3b82f6}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge i{font-size:1rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .issue-main-title{margin:0;font-size:1.5rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-action-bar{padding:.75rem 2rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left{display:flex;gap:.5rem}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s;color:#334155}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:hover:not(:disabled){background:#f1f5f9;border-color:#94a3b8}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:disabled{opacity:.5;cursor:not-allowed}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary:hover:not(:disabled){background:#2563eb}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success{background:#10b981;color:#fff;border-color:#10b981}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success:hover:not(:disabled){background:#059669}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning{background:#f59e0b;color:#fff;border-color:#f59e0b}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning:hover:not(:disabled){background:#d97706}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;color:#334155;transition:all .2s}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn:hover{background:#f1f5f9}.state-machine-ui .issue-tracker .issue-main-content{display:grid;grid-template-columns:320px 1fr;gap:2rem;padding:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row{display:flex;padding:.625rem 0;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row:last-child{border-bottom:none}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row label{min-width:100px;font-size:.8125rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value i{font-size:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .status-badge{padding:.25rem .625rem;border-radius:4px;color:#fff;font-weight:600;font-size:.75rem;text-transform:uppercase}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link{color:#3b82f6;font-size:.8125rem;text-decoration:none;margin-left:.5rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link:hover{text-decoration:underline}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .user-avatar{width:24px;height:24px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz{background:#f8fafc;border-radius:8px;padding:1.5rem;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz h3{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state{display:flex;flex-direction:column;align-items:center;gap:.375rem;opacity:.4;transition:opacity .2s}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active,.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.completed{opacity:1}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;box-shadow:0 2px 4px #0000001a}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-name{font-size:.6875rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active .state-name{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-arrow{color:#cbd5e1;font-size:.75rem;margin:0 .25rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section h3,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content{padding:1rem;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content p,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content p{margin:0;color:#475569;line-height:1.7;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline{display:flex;flex-direction:column;gap:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item{display:flex;gap:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-avatar{width:32px;height:32px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content{flex:1;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header{font-size:.875rem;color:#334155;line-height:1.6;margin-bottom:.375rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header strong{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header .activity-action{color:#64748b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#94a3b8}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta .activity-label{color:#8b5cf6;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item:last-child .activity-content{border-bottom:none;padding-bottom:0}.registration-ui{display:flex;justify-content:center;align-items:center;min-height:400px}.registration-ui .registration-card{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000000d;text-align:center;max-width:500px}.registration-ui .registration-card .registration-icon{margin-bottom:1.5rem}.registration-ui .registration-card .registration-icon i{font-size:5rem;color:#8b5cf6}.registration-ui .registration-card h3{margin:0 0 .75rem;color:#1e293b;font-size:1.75rem;font-weight:700}.registration-ui .registration-card .registration-desc{margin:0 0 2rem;color:#64748b;line-height:1.7}.registration-ui .registration-card .registration-progress{padding:2rem;background:#fef3c7;border-radius:8px}.registration-ui .registration-card .registration-progress .progress-spinner{margin-bottom:1rem}.registration-ui .registration-card .registration-progress .progress-spinner i{font-size:3rem;color:#f59e0b}.registration-ui .registration-card .registration-progress p{margin:0;color:#92400e;font-weight:500}.registration-ui .registration-card .registration-success{padding:2rem;background:#f0fdf4;border-radius:8px}.registration-ui .registration-card .registration-success i{font-size:4rem;color:#10b981;margin-bottom:1rem}.registration-ui .registration-card .registration-success h4{margin:0 0 .5rem;color:#064e3b;font-size:1.5rem;font-weight:700}.registration-ui .registration-card .registration-success p{margin:0;color:#065f46}.default-execution-view{display:flex;justify-content:center;align-items:center;min-height:400px}.default-execution-view .execution-status{text-align:center;padding:3rem;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;min-width:400px}.default-execution-view .execution-status i{font-size:5rem;margin-bottom:1.5rem}.default-execution-view .execution-status h3{margin:0 0 .75rem;font-size:1.75rem;font-weight:700}.default-execution-view .execution-status p{margin:0;color:#64748b;line-height:1.7}.default-execution-view .execution-status .status-running i{color:#f59e0b}.default-execution-view .execution-status .status-finished i{color:#10b981}.default-execution-view .execution-status .status-error i{color:#ef4444}.execution-logs-panel{margin-top:2rem;background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px #0000000d}.execution-logs-panel h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.125rem}.execution-logs-panel h3 i{color:#8b5cf6}.execution-logs-panel .logs-container-compact{max-height:300px;overflow-y:auto;background:#f8fafc;border-radius:8px;padding:.75rem}.execution-logs-panel .logs-container-compact .log-item-compact{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.execution-logs-panel .logs-container-compact .log-item-compact:last-child{margin-bottom:0}.execution-logs-panel .logs-container-compact .log-item-compact .log-time{font-family:Courier New,monospace;color:#64748b;font-size:.8125rem;min-width:70px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon{display:flex;align-items:center;justify-content:center;width:20px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon i{font-size:1rem}.execution-logs-panel .logs-container-compact .log-item-compact .log-message{flex:1;color:#334155}.execution-logs-panel .logs-container-compact .log-item-compact.log-info{background:#eff6ff}.execution-logs-panel .logs-container-compact .log-item-compact.log-info .log-icon i{color:#3b82f6}.execution-logs-panel .logs-container-compact .log-item-compact.log-success{background:#f0fdf4}.execution-logs-panel .logs-container-compact .log-item-compact.log-success .log-icon i{color:#10b981}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning{background:#fffbeb}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning .log-icon i{color:#f59e0b}.execution-logs-panel .logs-container-compact .log-item-compact.log-error{background:#fef2f2}.execution-logs-panel .logs-container-compact .log-item-compact.log-error .log-icon i{color:#ef4444}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$1.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$1.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i6.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXMActivityCategoriesTreeComponent, selector: "axp-activity-categories-tree", outputs: ["categoryClick", "activityClick", "activityDragStart"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WorkflowStudioComponent, decorators: [{
             type: Component,