@memberjunction/ng-core-entity-forms 6.1.0-edge.4 → 6.1.0-edge.6

package/dist/lib/custom/Templates/template-param-dialog.component.js

@@ -633,7 +633,7 @@ export class TemplateParamDialogComponent extends BaseAngularComponent {
             i0.ɵɵconditionalCreate(0, TemplateParamDialogComponent_Conditional_0_Template, 27, 8, "mj-dialog", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx._isVisible ? 0 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDialogComponent, i2.MJDialogTitlebarComponent, i2.MJDialogActionsComponent], styles: [".dialog-content[_ngcontent-%COMP%] {\n    min-height: 500px;\n    max-height: 650px;\n}\n\n.parameter-row[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.parameter-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.param-name[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%]   .mj-input[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%]   .mj-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.json-preview[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.3;\n}\n\n.test-results[_ngcontent-%COMP%] {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.result-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.4;\n}\n\n\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-muted);\n}\n\n.parameter-row[_ngcontent-%COMP%] {\n    align-items: flex-start;\n}\n\n.parameters-section[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n.param-name[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n}\n\n.header-section[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.json-preview-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.result-header[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n    transition: background-color 0.2s ease;\n}\n\n.fa-chevron-down[_ngcontent-%COMP%], \n.fa-chevron-right[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]   [mjButton][_ngcontent-%COMP%] {\n    opacity: 0.8;\n    transition: opacity 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]:hover   [mjButton][_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n\n.dlg-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.dlg-header-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 1.2em;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.dlg-header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.dlg-header[_ngcontent-%COMP%]   .required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n\n\n.dlg-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-text-muted);\n    margin-right: 12px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n\n.dlg-panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.dlg-panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n\n\n.dlg-info-text[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n\n\n.params-table[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n}\n\n.params-table-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.params-table-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    align-items: start;\n    background: var(--mj-bg-surface);\n}\n\n.param-source-icon-template[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.param-source-icon-custom[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.75em;\n}\n\n.param-required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: bold;\n}\n\n.param-key-text[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 4px 0;\n    word-break: break-word;\n}\n\n.param-description-text[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    font-style: italic;\n    word-break: break-word;\n}\n\n.param-type-text[_ngcontent-%COMP%] {\n    font-size: 0.7em;\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.param-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: start;\n    justify-content: center;\n    padding-top: 4px;\n}\n\n\n\n.add-param-row[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.json-preview-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.85em;\n    color: var(--mj-text-primary);\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.json-preview-box[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n\n\n.result-badge-success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n.result-badge-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n\n\n.result-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 12px;\n    margin-bottom: 16px;\n    padding: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.result-stats.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-stats.error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-stat[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.result-stat-label[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    margin-bottom: 2px;\n    color: var(--mj-text-muted);\n}\n\n.result-stat-value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n\n\n.output-header[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.output-header[_ngcontent-%COMP%]   .success-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.output-header[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.output-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n    color: var(--mj-text-primary);\n}\n\n.error-output-box[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 4px;\n    padding: 12px;\n    color: var(--mj-status-error);\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n}\n\n\n\nmj-empty-state.no-results-state[_ngcontent-%COMP%] {\n    flex: 1;\n}"] }); }
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDialogComponent, i2.MJDialogTitlebarComponent, i2.MJDialogActionsComponent], styles: [".dialog-content[_ngcontent-%COMP%] {\n    min-height: 500px;\n    max-height: 650px;\n}\n\n.parameter-row[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.parameter-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.param-name[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%]   .mj-input[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%]   .mj-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.json-preview[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.3;\n}\n\n.test-results[_ngcontent-%COMP%] {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.result-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.4;\n}\n\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-muted);\n}\n\n.parameter-row[_ngcontent-%COMP%] {\n    align-items: flex-start;\n}\n\n.parameters-section[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n.param-name[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n}\n\n.header-section[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.json-preview-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.result-header[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n    transition: background-color 0.2s ease;\n}\n\n.fa-chevron-down[_ngcontent-%COMP%], \n.fa-chevron-right[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]   [mjButton][_ngcontent-%COMP%] {\n    opacity: 0.8;\n    transition: opacity 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]:hover   [mjButton][_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n.dlg-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.dlg-header-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 1.2em;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.dlg-header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.dlg-header[_ngcontent-%COMP%]   .required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n\n.dlg-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-text-muted);\n    margin-right: 12px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n.dlg-panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.dlg-panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n\n.dlg-info-text[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n\n.params-table[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n}\n\n.params-table-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.params-table-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    align-items: start;\n    background: var(--mj-bg-surface);\n}\n\n.param-source-icon-template[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.param-source-icon-custom[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.75em;\n}\n\n.param-required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: bold;\n}\n\n.param-key-text[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 4px 0;\n    word-break: break-word;\n}\n\n.param-description-text[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    font-style: italic;\n    word-break: break-word;\n}\n\n.param-type-text[_ngcontent-%COMP%] {\n    font-size: 0.7em;\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.param-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: start;\n    justify-content: center;\n    padding-top: 4px;\n}\n\n\n.add-param-row[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n\n.json-preview-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.85em;\n    color: var(--mj-text-primary);\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.json-preview-box[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n\n.result-badge-success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n.result-badge-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n\n.result-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 12px;\n    margin-bottom: 16px;\n    padding: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.result-stats.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-stats.error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-stat[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.result-stat-label[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    margin-bottom: 2px;\n    color: var(--mj-text-muted);\n}\n\n.result-stat-value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n\n.output-header[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.output-header[_ngcontent-%COMP%]   .success-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.output-header[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.output-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n    color: var(--mj-text-primary);\n}\n\n.error-output-box[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 4px;\n    padding: 12px;\n    color: var(--mj-status-error);\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n}\n\n\nmj-empty-state.no-results-state[_ngcontent-%COMP%] {\n    flex: 1;\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateParamDialogComponent, [{
         type: Component,

package/dist/lib/custom/Templates/template-params-grid.component.js

@@ -462,7 +462,7 @@ export class TemplateParamsGridComponent extends BaseAngularComponent {
             i0.ɵɵproperty("theme", ctx.GridTheme)("rowData", ctx.templateParams)("columnDefs", ctx.ColumnDefs)("defaultColDef", ctx.DefaultColDef)("editType", "fullRow")("getRowId", ctx.getRowId)("suppressClickEdit", true)("overlayNoRowsTemplate", ctx.noRowsTemplate);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.editMode ? 9 : -1);
-        } }, dependencies: [i1.AgGridAngular, i2.MJButtonDirective], styles: [".template-params-grid[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.params-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    font-size: 1.2em;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.params-description[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n\n\n.params-toolbar[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    padding: 12px;\n    background-color: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px 6px 0 0;\n}\n\n\n\n.params-ag-grid[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 0 0 6px 6px;\n}\n\n.params-toolbar[_ngcontent-%COMP%]    + .params-ag-grid[_ngcontent-%COMP%] {\n    border-top: none;\n}\n\n\n\n.params-help[_ngcontent-%COMP%] {\n    margin-top: 30px;\n    padding: 20px;\n    background-color: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 15px 0;\n    color: var(--mj-text-primary);\n    font-size: 1em;\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.params-help[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n    margin: 10px 0;\n    padding-left: 25px;\n}\n\n.params-help[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.params-help[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n}\n\n.help-note[_ngcontent-%COMP%] {\n    margin-top: 15px;\n    padding: 10px 15px;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-brand-primary);\n    border-radius: 4px;\n    font-size: 0.9em;\n}\n\n.help-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.help-note[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n    font-family: 'Courier New', monospace;\n    color: var(--mj-status-error);\n}\n\n\n\n@media (max-width: 768px) {\n    .template-params-grid[_ngcontent-%COMP%] {\n        padding: 10px;\n    }\n\n    .params-help[_ngcontent-%COMP%] {\n        padding: 15px;\n    }\n}"] }); }
+        } }, dependencies: [i1.AgGridAngular, i2.MJButtonDirective], styles: [".template-params-grid[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.params-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    font-size: 1.2em;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.params-description[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n\n.params-toolbar[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    padding: 12px;\n    background-color: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px 6px 0 0;\n}\n\n\n.params-ag-grid[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 0 0 6px 6px;\n}\n\n.params-toolbar[_ngcontent-%COMP%]    + .params-ag-grid[_ngcontent-%COMP%] {\n    border-top: none;\n}\n\n\n.params-help[_ngcontent-%COMP%] {\n    margin-top: 30px;\n    padding: 20px;\n    background-color: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 15px 0;\n    color: var(--mj-text-primary);\n    font-size: 1em;\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.params-help[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n    margin: 10px 0;\n    padding-left: 25px;\n}\n\n.params-help[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.params-help[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n}\n\n.help-note[_ngcontent-%COMP%] {\n    margin-top: 15px;\n    padding: 10px 15px;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-brand-primary);\n    border-radius: 4px;\n    font-size: 0.9em;\n}\n\n.help-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.help-note[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n    font-family: 'Courier New', monospace;\n    color: var(--mj-status-error);\n}\n\n\n@media (max-width: 768px) {\n    .template-params-grid[_ngcontent-%COMP%] {\n        padding: 10px;\n    }\n\n    .params-help[_ngcontent-%COMP%] {\n        padding: 15px;\n    }\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateParamsGridComponent, [{
         type: Component,

package/dist/lib/custom/Templates/templates-form.component.js

@@ -793,7 +793,7 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             i0.ɵɵconditionalCreate(0, MJTemplateFormComponentExtended_Conditional_0_Template, 48, 46);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.record ? 0 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJComboboxComponent, i2.MJSwitchComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, i3.ExplorerEntityDataGridComponent, i4.TemplateParamDialogComponent, i5.TemplateParamsGridComponent, i6.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\n}\n\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\n\n.template-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n\n\n.template-header-area[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .template-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .active-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .inactive-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n\n\n.run-template-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n\n.configuration-sections[_ngcontent-%COMP%] {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.panel-title[_ngcontent-%COMP%]   .count-badge[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n  .configuration-sections mj-accordion-panel {\n    margin-bottom: 12px;\n}\n\n  .configuration-sections .mj-accordion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n    background: var(--mj-bg-surface-card);\n}\n\n  .configuration-sections .mj-accordion-header {\n    padding: 16px 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n  .configuration-sections .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n  .configuration-sections .mj-accordion-body {\n    padding: 0;\n}\n\n\n\n.template-header[_ngcontent-%COMP%], \n.badge[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}"] }); }
+        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJComboboxComponent, i2.MJSwitchComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, i3.ExplorerEntityDataGridComponent, i4.TemplateParamDialogComponent, i5.TemplateParamsGridComponent, i6.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\n}\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\n\n.template-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n\n.template-header-area[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .template-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .active-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .inactive-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n\n.run-template-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n.configuration-sections[_ngcontent-%COMP%] {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.panel-title[_ngcontent-%COMP%]   .count-badge[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n  .configuration-sections mj-accordion-panel {\n    margin-bottom: 12px;\n}\n\n  .configuration-sections .mj-accordion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n    background: var(--mj-bg-surface-card);\n}\n\n  .configuration-sections .mj-accordion-header {\n    padding: 16px 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n  .configuration-sections .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n  .configuration-sections .mj-accordion-body {\n    padding: 0;\n}\n\n\n.template-header[_ngcontent-%COMP%], \n.badge[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}"] }); }
 };
 MJTemplateFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Templates')

package/dist/lib/custom/Tests/entity-link-pill.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-link-pill.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Tests/entity-link-pill.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6C,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAA0B,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;;AACrE;;;;;;;;;;;;;GAaG;AACH,qBA4Da,uBAAwB,SAAQ,oBAAqB,YAAW,SAAS;IAkBxE,OAAO,CAAC,GAAG;IAjBvB;;OAEG;IACM,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C;;OAEG;IACM,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC;;OAEG;IACM,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,UAAU,EAAE,UAAU,GAAG,IAAI,CAAQ;IACrC,OAAO,KAAK,QAAQ,GAAiC;gBACjC,GAAG,EAAE,iBAAiB;IAG1C,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAOzC,IAAI,SAAS,IAAI,MAAM,CAYtB;IAED,IAAI,YAAY,IAAI,MAAM,CAQzB;IAED,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,UAAU,IAAI,IAAI;yCA5DP,uBAAuB;2CAAvB,uBAAuB;CAiEnC"}
+{"version":3,"file":"entity-link-pill.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Tests/entity-link-pill.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6C,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAA0B,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;;AACrE;;;;;;;;;;;;;GAaG;AACH,qBA4Da,uBAAwB,SAAQ,oBAAqB,YAAW,SAAS;IAkBxE,OAAO,CAAC,GAAG;IAjBvB;;OAEG;IACM,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C;;OAEG;IACM,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC;;OAEG;IACM,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,UAAU,EAAE,UAAU,GAAG,IAAI,CAAQ;IACrC,OAAO,KAAK,QAAQ,GAAiC;gBACjC,GAAG,EAAE,iBAAiB;IAG1C,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAOzC,IAAI,SAAS,IAAI,MAAM,CAYtB;IAED,IAAI,YAAY,IAAI,MAAM,CAQzB;IAED,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,UAAU,IAAI,IAAI;yCA5DP,uBAAuB;2CAAvB,uBAAuB;CAmEnC"}

package/dist/lib/custom/Tests/entity-link-pill.component.js

@@ -92,7 +92,9 @@ export class EntityLinkPillComponent extends BaseAngularComponent {
     }
     openRecord() {
         if (this.entityName && this.recordId) {
-            SharedService.Instance.OpenEntityRecord(this.entityName, CompositeKey.FromID(this.recordId));
+            // `entityName` is an input — any entity, any key column name — so resolve the key against
+            // the metadata already loaded in ngOnChanges instead of assuming `ID`.
+            SharedService.Instance.OpenEntityRecord(this.entityName, CompositeKey.FromURLSegment(this.entityInfo, this.recordId));
         }
     }
     static { this.ɵfac = function EntityLinkPillComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityLinkPillComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }

package/dist/lib/custom/Tests/entity-link-pill.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"entity-link-pill.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/Tests/entity-link-pill.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAA+C,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,YAAY,EAAwB,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;;;;;IAoB/D,+BAA4E;IAA7C,yLAAS,mBAAY,KAAC;IACnD,uBAAiD;IACjD,+BAA2B;IAAA,YAAkB;IAAA,iBAAO;IACpD,uBAAoD;IACtD,iBAAO;;;IAJ+C,0CAAqB;IAClD,cAAqB;IAArB,0CAAqB;IACjB,eAAkB;IAAlB,yCAAkB;;AArBrD;;;;;;;;;;;;;GAaG;AA6DH,MAAM,OAAO,uBAAwB,SAAQ,oBAAoB;IAiB/D,IAAY,QAAQ,KAAK,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,YAAoB,GAAsB;QACxC,KAAK,EAAE,CAAC;QADU,QAAG,GAAH,GAAG,CAAmB;QAjB1C;;WAEG;QACM,eAAU,GAAkB,IAAI,CAAC;QAE1C;;WAEG;QACM,aAAQ,GAAkB,IAAI,CAAC;QAExC;;WAEG;QACM,eAAU,GAAkB,IAAI,CAAC;QAE1C,eAAU,GAAsB,IAAI,CAAC;IAG3B,CAAC;IAEX,WAAW,CAAC,OAAsB;QAChC,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC;YACtE,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;YAC1B,gEAAgE;YAChE,kCAAkC;YAClC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAClC,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC3B,OAAO,OAAO,IAAI,EAAE,CAAC;YACvB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,iCAAiC;QACjC,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAC9B,CAAC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAI,WAAW;QACb,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,QAAQ,CAAC;QACtD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,QAAQ,WAAW,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;QACnD,CAAC;QACD,OAAO,QAAQ,WAAW,EAAE,CAAC;IAC/B,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/F,CAAC;IACH,CAAC;wHAhEU,uBAAuB;oEAAvB,uBAAuB;YAxDhC,0FAA8B;;YAA9B,yDAMC;;;iFAkDQ,uBAAuB;cA5DnC,SAAS;6BACI,KAAK,YACP,qBAAqB,YACrB;;;;;;;;KAQP,mBA+Cc,uBAAuB,CAAC,MAAM;;kBAM9C,KAAK;;kBAKL,KAAK;;kBAKL,KAAK;;kFAdK,uBAAuB","sourcesContent":["import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';\nimport { CompositeKey, Metadata, EntityInfo } from '@memberjunction/core';\nimport { SharedService } from '@memberjunction/ng-shared';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\n/**\n * A clickable pill component that displays a link to a related entity record.\n * Shows the entity icon (from metadata) and either the record name or entity name.\n * Clicking opens the entity record in a new tab.\n *\n * Usage:\n * ```html\n * <mj-entity-link-pill\n *   [entityName]=\"'MJ: AI Agent Runs'\"\n *   [recordId]=\"run.TargetLogID\"\n *   [recordName]=\"run.AgentRunName\">\n * </mj-entity-link-pill>\n * ```\n */\n@Component({\n  standalone: false,\n  selector: 'mj-entity-link-pill',\n  template: `\n    @if (entityInfo && recordId) {\n      <span class=\"entity-link-pill\" (click)=\"openRecord()\" [title]=\"tooltipText\">\n        <i class=\"entity-icon\" [ngClass]=\"iconClass\"></i>\n        <span class=\"entity-label\">{{ displayLabel }}</span>\n        <i class=\"fas fa-external-link-alt pill-action\"></i>\n      </span>\n    }\n    `,\n  styles: [`\n    .entity-link-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 10px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n      border-radius: 16px;\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n      white-space: nowrap;\n      max-width: 200px;\n    }\n\n    .entity-link-pill:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .entity-icon {\n      font-size: 11px;\n      opacity: 0.9;\n    }\n\n    .entity-label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n    }\n\n    .pill-action {\n      font-size: 9px;\n      opacity: 0.6;\n      transition: opacity 0.2s ease;\n    }\n\n    .entity-link-pill:hover .pill-action {\n      opacity: 1;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class EntityLinkPillComponent extends BaseAngularComponent implements OnChanges {\n  /**\n   * The entity name to link to (e.g., 'MJ: AI Agent Runs')\n   */\n  @Input() entityName: string | null = null;\n\n  /**\n   * The record ID to link to\n   */\n  @Input() recordId: string | null = null;\n\n  /**\n   * Optional display name for the record. If not provided, uses entity name.\n   */\n  @Input() recordName: string | null = null;\n\n  entityInfo: EntityInfo | null = null;\n  private get metadata() { return this.ProviderToUse; }\n  constructor(private cdr: ChangeDetectorRef) {\n    super();}\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['entityName'] && this.entityName) {\n      this.entityInfo = this.metadata.EntityByName(this.entityName) ?? null;\n      this.cdr.markForCheck();\n    }\n  }\n\n  get iconClass(): string {\n    if (this.entityInfo?.Icon) {\n      // Entity icon is typically a Font Awesome class like 'fa-robot'\n      // Ensure it has the proper prefix\n      const icon = this.entityInfo.Icon;\n      if (icon.startsWith('fa-')) {\n        return `fas ${icon}`;\n      }\n      return icon;\n    }\n    // Default icon if none specified\n    return 'fas fa-link';\n  }\n\n  get displayLabel(): string {\n    if (this.recordName) {\n      return this.recordName;\n    }\n    if (this.entityInfo) {\n      return this.entityInfo.Name;\n    }\n    return 'View Record';\n  }\n\n  get tooltipText(): string {\n    const entityLabel = this.entityInfo?.Name || 'Record';\n    if (this.recordName) {\n      return `Open ${entityLabel}: ${this.recordName}`;\n    }\n    return `Open ${entityLabel}`;\n  }\n\n  openRecord(): void {\n    if (this.entityName && this.recordId) {\n      SharedService.Instance.OpenEntityRecord(this.entityName, CompositeKey.FromID(this.recordId));\n    }\n  }\n}\n"]}
+{"version":3,"file":"entity-link-pill.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/Tests/entity-link-pill.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAA+C,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,YAAY,EAAwB,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;;;;;IAoB/D,+BAA4E;IAA7C,yLAAS,mBAAY,KAAC;IACnD,uBAAiD;IACjD,+BAA2B;IAAA,YAAkB;IAAA,iBAAO;IACpD,uBAAoD;IACtD,iBAAO;;;IAJ+C,0CAAqB;IAClD,cAAqB;IAArB,0CAAqB;IACjB,eAAkB;IAAlB,yCAAkB;;AArBrD;;;;;;;;;;;;;GAaG;AA6DH,MAAM,OAAO,uBAAwB,SAAQ,oBAAoB;IAiB/D,IAAY,QAAQ,KAAK,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,YAAoB,GAAsB;QACxC,KAAK,EAAE,CAAC;QADU,QAAG,GAAH,GAAG,CAAmB;QAjB1C;;WAEG;QACM,eAAU,GAAkB,IAAI,CAAC;QAE1C;;WAEG;QACM,aAAQ,GAAkB,IAAI,CAAC;QAExC;;WAEG;QACM,eAAU,GAAkB,IAAI,CAAC;QAE1C,eAAU,GAAsB,IAAI,CAAC;IAG3B,CAAC;IAEX,WAAW,CAAC,OAAsB;QAChC,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC;YACtE,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;YAC1B,gEAAgE;YAChE,kCAAkC;YAClC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAClC,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC3B,OAAO,OAAO,IAAI,EAAE,CAAC;YACvB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,iCAAiC;QACjC,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAC9B,CAAC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAI,WAAW;QACb,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,QAAQ,CAAC;QACtD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,QAAQ,WAAW,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;QACnD,CAAC;QACD,OAAO,QAAQ,WAAW,EAAE,CAAC;IAC/B,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,0FAA0F;YAC1F,uEAAuE;YACvE,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxH,CAAC;IACH,CAAC;wHAlEU,uBAAuB;oEAAvB,uBAAuB;YAxDhC,0FAA8B;;YAA9B,yDAMC;;;iFAkDQ,uBAAuB;cA5DnC,SAAS;6BACI,KAAK,YACP,qBAAqB,YACrB;;;;;;;;KAQP,mBA+Cc,uBAAuB,CAAC,MAAM;;kBAM9C,KAAK;;kBAKL,KAAK;;kBAKL,KAAK;;kFAdK,uBAAuB","sourcesContent":["import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';\nimport { CompositeKey, Metadata, EntityInfo } from '@memberjunction/core';\nimport { SharedService } from '@memberjunction/ng-shared';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\n/**\n * A clickable pill component that displays a link to a related entity record.\n * Shows the entity icon (from metadata) and either the record name or entity name.\n * Clicking opens the entity record in a new tab.\n *\n * Usage:\n * ```html\n * <mj-entity-link-pill\n *   [entityName]=\"'MJ: AI Agent Runs'\"\n *   [recordId]=\"run.TargetLogID\"\n *   [recordName]=\"run.AgentRunName\">\n * </mj-entity-link-pill>\n * ```\n */\n@Component({\n  standalone: false,\n  selector: 'mj-entity-link-pill',\n  template: `\n    @if (entityInfo && recordId) {\n      <span class=\"entity-link-pill\" (click)=\"openRecord()\" [title]=\"tooltipText\">\n        <i class=\"entity-icon\" [ngClass]=\"iconClass\"></i>\n        <span class=\"entity-label\">{{ displayLabel }}</span>\n        <i class=\"fas fa-external-link-alt pill-action\"></i>\n      </span>\n    }\n    `,\n  styles: [`\n    .entity-link-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 10px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n      border-radius: 16px;\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n      white-space: nowrap;\n      max-width: 200px;\n    }\n\n    .entity-link-pill:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .entity-icon {\n      font-size: 11px;\n      opacity: 0.9;\n    }\n\n    .entity-label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n    }\n\n    .pill-action {\n      font-size: 9px;\n      opacity: 0.6;\n      transition: opacity 0.2s ease;\n    }\n\n    .entity-link-pill:hover .pill-action {\n      opacity: 1;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class EntityLinkPillComponent extends BaseAngularComponent implements OnChanges {\n  /**\n   * The entity name to link to (e.g., 'MJ: AI Agent Runs')\n   */\n  @Input() entityName: string | null = null;\n\n  /**\n   * The record ID to link to\n   */\n  @Input() recordId: string | null = null;\n\n  /**\n   * Optional display name for the record. If not provided, uses entity name.\n   */\n  @Input() recordName: string | null = null;\n\n  entityInfo: EntityInfo | null = null;\n  private get metadata() { return this.ProviderToUse; }\n  constructor(private cdr: ChangeDetectorRef) {\n    super();}\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['entityName'] && this.entityName) {\n      this.entityInfo = this.metadata.EntityByName(this.entityName) ?? null;\n      this.cdr.markForCheck();\n    }\n  }\n\n  get iconClass(): string {\n    if (this.entityInfo?.Icon) {\n      // Entity icon is typically a Font Awesome class like 'fa-robot'\n      // Ensure it has the proper prefix\n      const icon = this.entityInfo.Icon;\n      if (icon.startsWith('fa-')) {\n        return `fas ${icon}`;\n      }\n      return icon;\n    }\n    // Default icon if none specified\n    return 'fas fa-link';\n  }\n\n  get displayLabel(): string {\n    if (this.recordName) {\n      return this.recordName;\n    }\n    if (this.entityInfo) {\n      return this.entityInfo.Name;\n    }\n    return 'View Record';\n  }\n\n  get tooltipText(): string {\n    const entityLabel = this.entityInfo?.Name || 'Record';\n    if (this.recordName) {\n      return `Open ${entityLabel}: ${this.recordName}`;\n    }\n    return `Open ${entityLabel}`;\n  }\n\n  openRecord(): void {\n    if (this.entityName && this.recordId) {\n      // `entityName` is an input — any entity, any key column name — so resolve the key against\n      // the metadata already loaded in ngOnChanges instead of assuming `ID`.\n      SharedService.Instance.OpenEntityRecord(this.entityName, CompositeKey.FromURLSegment(this.entityInfo, this.recordId));\n    }\n  }\n}\n"]}

package/dist/lib/custom/Tests/test-form.component.js

@@ -2340,7 +2340,7 @@ let MJTestFormComponentExtended = class MJTestFormComponentExtended extends MJTe
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("disabled", ctx.isSaving || !ctx.isDirty);
             i0.ɵɵattribute("tabindex", ctx.isDirty ? 0 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.MinValidator, i2.NgModel, i3.MJEmptyStateComponent, i3.MJButtonDirective, i4.CodeEditorComponent, i5.TestRunDialogComponent, i5.EvaluationModeToggleComponent, i6.LoadingComponent, i3.MjSlidePanelComponent, i7.EntityLinkPillComponent, i1.DatePipe], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  --test-primary: var(--mj-brand-primary);\n  --test-primary-light: var(--mj-brand-primary);\n  --test-primary-dark: var(--mj-brand-primary-hover);\n  --test-success: var(--mj-status-success);\n  --test-success-light: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  --test-error: var(--mj-status-error);\n  --test-error-light: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  --test-warning: var(--mj-status-warning);\n  --test-warning-light: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  --test-disabled: var(--mj-text-muted);\n  --test-bg: var(--mj-bg-surface-card);\n  --test-surface: var(--mj-bg-surface);\n  --test-border: var(--mj-border-default);\n  --test-text: var(--mj-text-primary);\n  --test-text-secondary: var(--mj-text-muted);\n  --test-text-muted: var(--mj-text-disabled);\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: var(--mj-shadow-sm);\n  --test-shadow-md: var(--mj-shadow-md);\n  --test-shadow-lg: var(--mj-shadow-lg);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n\n\n.breadcrumb[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  text-decoration: none;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  margin: 0 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%] {\n  color: var(--test-text-secondary);\n  font-weight: 500;\n}\n\n.breadcrumb-text[_ngcontent-%COMP%] {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.test-form[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n\n\n\n\n.test-header[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.test-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.test-icon[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n\n\n.test-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n  word-wrap: break-word;\n}\n\n.test-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.status-badge.status-disabled[_ngcontent-%COMP%] { background: var(--mj-text-secondary); }\n.status-badge.status-pending[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n\n.status-badge-inline[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active[_ngcontent-%COMP%] { background: var(--test-success); }\n.status-badge-inline.status-disabled[_ngcontent-%COMP%] { background: var(--test-disabled); }\n.status-badge-inline.status-pending[_ngcontent-%COMP%] { background: var(--test-warning); }\n\n.test-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  white-space: nowrap;\n}\n\n\n\n.test-description[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--test-radius-md);\n  margin-bottom: 16px;\n  border: 1px solid var(--test-border);\n}\n\n.test-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n\n\n\n\n.metrics-bar[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 14px;\n  text-align: center;\n  transition: var(--test-transition);\n}\n\n.metric-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  margin-bottom: 6px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n\n\n.metric-progress[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  height: 4px;\n  background: var(--test-border);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.metric-progress-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-status-success);\n  border-radius: 2px;\n  transition: width 0.5s ease-out;\n}\n\n\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 15px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--test-primary);\n}\n\n.tab-shortcut[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  margin-left: 4px;\n}\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  scroll-behavior: smooth;\n}\n\n\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n.info-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  word-wrap: break-word;\n  font-weight: 500;\n}\n\n\n\n.json-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.json-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 16px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n  flex-wrap: wrap;\n}\n\n.json-tab[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 100px;\n  padding: 10px 14px;\n  border: none;\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: var(--test-radius-sm);\n  transition: var(--test-transition);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.json-tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: var(--mj-bg-overlay);\n}\n\n.json-tab.active[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  font-weight: 600;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n  max-height: 400px;\n}\n\n\n\n\n\n.config-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.config-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.config-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.config-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n  background: var(--test-surface);\n}\n\n.config-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.config-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--test-text-muted);\n}\n\n.config-hint[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--test-text-muted);\n  margin-top: 4px;\n}\n\n.config-editor-container[_ngcontent-%COMP%] {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n}\n\n.config-editor-container.small[_ngcontent-%COMP%] {\n  min-height: 100px;\n  max-height: 150px;\n}\n\n\n\n\n\n.runs-tab[_ngcontent-%COMP%], \n.suites-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.skeleton-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-icon[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n  flex-shrink: 0;\n}\n\n.skeleton-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line[_ngcontent-%COMP%] {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide[_ngcontent-%COMP%] { width: 70%; }\n.skeleton-line.narrow[_ngcontent-%COMP%] { width: 40%; }\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n\n\n.runs-list[_ngcontent-%COMP%], \n.suites-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.run-item[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-item[_ngcontent-%COMP%]:hover, \n.suite-item[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.run-icon[_ngcontent-%COMP%], \n.suite-icon[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.suite-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n\n.run-content[_ngcontent-%COMP%], \n.suite-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 4px;\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-status[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.suite-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-meta[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  flex-wrap: wrap;\n}\n\n.run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 11px;\n}\n\n.run-item[_ngcontent-%COMP%]    > i.fa-chevron-right[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%]    > i.fa-chevron-right[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.run-item[_ngcontent-%COMP%]:hover    > i.fa-chevron-right[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%]:hover    > i.fa-chevron-right[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n\n.run-eval-stack[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n\n\n.eval-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.eval-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.eval-pill.status-pill.status-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-pill.status-pill.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-pill.status-pill.status-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.status-pill.status-timeout[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.status-pill.status-skipped[_ngcontent-%COMP%], \n.eval-pill.status-pill.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.eval-pill.status-pill.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.eval-pill.human-pill.no-feedback[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n  padding: 4px 8px;\n}\n\n.eval-pill.human-pill.has-feedback.rating-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-pill.human-pill.has-feedback.rating-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.human-pill.has-feedback.rating-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-pill.human-pill.has-feedback.rating-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.eval-pill.auto-pill.no-score[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n  padding: 4px 8px;\n}\n\n.eval-pill.auto-pill.has-score.score-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-pill.auto-pill.has-score.score-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.auto-pill.has-score.score-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-pill.auto-pill.has-score.score-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n\n.run-tags[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-tag[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.run-tag-more[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n\n\n\n\n\n\n.shortcuts-toggle[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.shortcut-keys[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .info-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .config-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .keyboard-shortcuts[_ngcontent-%COMP%], .shortcuts-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n\n\n@media (max-width: 768px) {\n  .test-form[_ngcontent-%COMP%] {\n    height: auto;\n    min-height: 100%;\n  }\n\n  .test-header[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-left[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .test-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 20px;\n  }\n\n  .test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .test-meta[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .status-badge[_ngcontent-%COMP%] {\n    padding: 4px 10px;\n    font-size: 11px;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px;\n  }\n\n  .metric-card[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .metric-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .tabs[_ngcontent-%COMP%] {\n    padding: 0 12px;\n  }\n\n  .tab[_ngcontent-%COMP%] {\n    padding: 12px 14px;\n    font-size: 13px;\n    gap: 6px;\n  }\n\n  .tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .tab-shortcut[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .info-section[_ngcontent-%COMP%], \n   .json-section[_ngcontent-%COMP%], \n   .config-section[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .info-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .json-tabs[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .json-tab[_ngcontent-%COMP%] {\n    min-width: 0;\n    justify-content: flex-start;\n  }\n\n  .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    padding: 14px;\n  }\n\n  .run-icon[_ngcontent-%COMP%], \n   .suite-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 16px;\n  }\n\n  .run-meta[_ngcontent-%COMP%], \n   .suite-meta[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n}\n\n\n\n\n\n@media (max-width: 480px) {\n  .test-header[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .header-left[_ngcontent-%COMP%] {\n    gap: 12px;\n  }\n\n  .test-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n    border-radius: 8px;\n  }\n\n  .test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .tabs[_ngcontent-%COMP%] {\n    padding: 0 8px;\n  }\n\n  .tab[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n\n  .tab-badge[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .run-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n}\n\n\n\n\n\n@media (hover: none) and (pointer: coarse) {\n  .tab[_ngcontent-%COMP%], \n   .json-tab[_ngcontent-%COMP%], \n   .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .run-item[_ngcontent-%COMP%]:active, \n   .suite-item[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    transform: scale(0.98);\n  }\n\n  .tab[_ngcontent-%COMP%]:active, \n   .json-tab[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  }\n\n  \n\n  .tab[_ngcontent-%COMP%] {\n    min-height: 48px;\n  }\n\n  .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    min-height: 64px;\n  }\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  .skeleton-icon[_ngcontent-%COMP%], \n   .skeleton-line[_ngcontent-%COMP%] {\n    animation: none;\n    background: var(--mj-border-default);\n  }\n}\n\n\n\n\n\n.history-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.history-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n\n\n.history-filters[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.time-range-filters[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  margin-right: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--test-primary-light);\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n  background: var(--test-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--test-primary);\n}\n\n.history-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n\n.history-kpi-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 20px;\n  flex-shrink: 0;\n}\n\n.kpi-icon.pass-rate[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 2px;\n}\n\n.trend-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.trend-icon.trend-up[_ngcontent-%COMP%] {\n  color: var(--test-success);\n}\n\n.trend-icon.trend-down[_ngcontent-%COMP%] {\n  color: var(--test-error);\n}\n\n\n\n.history-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.history-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.history-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n\n\n.history-table-container[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.history-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 14px;\n}\n\n.history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.history-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  text-align: left;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n}\n\n.history-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 3%, transparent);\n}\n\n.date-cell[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.passed-cell[_ngcontent-%COMP%] {\n  color: var(--test-success);\n  font-weight: 600;\n}\n\n.failed-cell[_ngcontent-%COMP%] {\n  color: var(--test-error);\n  font-weight: 600;\n}\n\n.pass-rate-cell[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.pass-rate-bar[_ngcontent-%COMP%] {\n  position: relative;\n  height: 24px;\n  background: var(--test-bg);\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.pass-rate-fill[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--mj-status-success);\n  border-radius: 12px;\n  transition: width 0.5s ease-out;\n}\n\n.pass-rate-text[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--test-text);\n  z-index: 1;\n}\n\n\n\n.suite-performance-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.suite-perf-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 18px;\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.suite-perf-header[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-perf-name[_ngcontent-%COMP%] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 6px;\n}\n\n.suite-perf-tags[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.tag-mini[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.tag-more[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.suite-perf-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  flex-wrap: wrap;\n}\n\n.suite-stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value.pass-rate.high[_ngcontent-%COMP%] {\n  color: var(--test-success);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value.pass-rate.low[_ngcontent-%COMP%] {\n  color: var(--test-error);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.suite-perf-arrow[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card[_ngcontent-%COMP%]:hover   .suite-perf-arrow[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n\n\n\n@media print {\n  .test-form[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    height: auto;\n  }\n\n  .header-actions[_ngcontent-%COMP%], \n   .tabs-container[_ngcontent-%COMP%], \n   .keyboard-shortcuts[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    overflow: visible;\n    padding: 0;\n  }\n\n  .info-section[_ngcontent-%COMP%], \n   .json-section[_ngcontent-%COMP%], \n   .config-section[_ngcontent-%COMP%] {\n    break-inside: avoid;\n    box-shadow: none;\n    border: 1px solid var(--mj-border-default);\n  }\n}\n\n\n\n\n\n\n.edit-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.edit-section-header[_ngcontent-%COMP%] {\n  margin: 0 0 18px 0;\n}\n\n.edit-section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.edit-section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.edit-section-sub[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.edit-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n}\n\n@media (max-width: 720px) {\n  .edit-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n.edit-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 0;\n}\n\n.edit-field--full[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.edit-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.edit-field[_ngcontent-%COMP%]   .required[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.config-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 72px;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.select-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.select-wrapper[_ngcontent-%COMP%]   select.config-input[_ngcontent-%COMP%] {\n  padding-right: 36px;\n  appearance: none;\n  background-color: var(--test-surface);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  background-size: 10px 7px;\n}\n\n\n\n.tag-editor[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  transition: var(--test-transition);\n  cursor: text;\n  min-height: 42px;\n  align-items: center;\n}\n\n.tag-editor[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tag-chip-editable[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 4px 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.tag-chip-editable[_ngcontent-%COMP%]   .tag-remove[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 10px;\n  transition: background 0.15s;\n}\n\n.tag-chip-editable[_ngcontent-%COMP%]   .tag-remove[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-input-inline[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 140px;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 13px;\n  color: var(--test-text);\n  padding: 4px 2px;\n}\n\n.tag-input-inline[_ngcontent-%COMP%]::placeholder {\n  color: var(--test-text-muted);\n}\n\n\n\n.meta-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--test-radius-md);\n  padding: 14px 18px;\n  border: 1px solid var(--test-border);\n}\n\n.meta-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 14px;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.meta-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.meta-mono[_ngcontent-%COMP%] {\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  font-size: 11px;\n}\n\n\n\n.dirty-indicator[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-left: 8px;\n  font-size: 14px;\n  color: var(--mj-status-warning);\n  line-height: 1;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n  vertical-align: middle;\n}\n\n@keyframes _ngcontent-%COMP%_pulseDot {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n.unsaved-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.unsaved-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 6px;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n}\n\n\n\n\n.tab-content.has-savebar[_ngcontent-%COMP%] {\n  padding-bottom: 84px;\n}\n\n\n\n\n\n\n.save-bar[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  right: 96px; \n\n  bottom: 16px;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px 16px 12px 20px;\n  background: var(--mj-bg-surface-elevated, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, var(--test-border));\n  border-radius: 14px;\n  box-shadow: 0 12px 32px color-mix(in srgb, var(--mj-status-warning) 10%, rgba(0, 0, 0, 0.18));\n  backdrop-filter: blur(8px);\n  \n\n\n\n  opacity: 0;\n  transform: translateY(calc(100% + 32px));\n  pointer-events: none;\n  transition:\n    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n}\n\n.save-bar--visible[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .save-bar[_ngcontent-%COMP%] {\n    transition: opacity 180ms ease-out;\n    transform: none;\n  }\n  .save-bar--visible[_ngcontent-%COMP%] {\n    transform: none;\n  }\n}\n\n.save-bar-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.save-bar-dot[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: 12px;\n  line-height: 1;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n}\n\n.save-bar-text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.save-bar-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.save-bar-fields[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.save-bar-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.save-bar-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: var(--test-transition);\n  font-family: inherit;\n}\n\n.save-bar-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.save-bar-btn--ghost[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.save-bar-btn--ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n  border-color: var(--test-text-muted);\n}\n\n.save-bar-kbd[_ngcontent-%COMP%] {\n  display: inline-flex;\n  gap: 3px;\n  margin-left: 6px;\n  opacity: 0.85;\n}\n\n.save-bar-kbd[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  background: color-mix(in srgb, white 18%, transparent);\n  border: 1px solid color-mix(in srgb, white 35%, transparent);\n  border-radius: 4px;\n  color: inherit;\n}\n\n@media (max-width: 640px) {\n  .save-bar[_ngcontent-%COMP%] {\n    left: 8px;\n    right: 8px;\n    bottom: 88px; \n\n    flex-direction: column;\n    align-items: stretch;\n    padding: 12px;\n  }\n  .save-bar-actions[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  .save-bar-kbd[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"], changeDetection: 0 }); }
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.MinValidator, i2.NgModel, i3.MJEmptyStateComponent, i3.MJButtonDirective, i4.CodeEditorComponent, i5.TestRunDialogComponent, i5.EvaluationModeToggleComponent, i6.LoadingComponent, i3.MjSlidePanelComponent, i7.EntityLinkPillComponent, i1.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  --test-primary: var(--mj-brand-primary);\n  --test-primary-light: var(--mj-brand-primary);\n  --test-primary-dark: var(--mj-brand-primary-hover);\n  --test-success: var(--mj-status-success);\n  --test-success-light: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  --test-error: var(--mj-status-error);\n  --test-error-light: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  --test-warning: var(--mj-status-warning);\n  --test-warning-light: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  --test-disabled: var(--mj-text-muted);\n  --test-bg: var(--mj-bg-surface-card);\n  --test-surface: var(--mj-bg-surface);\n  --test-border: var(--mj-border-default);\n  --test-text: var(--mj-text-primary);\n  --test-text-secondary: var(--mj-text-muted);\n  --test-text-muted: var(--mj-text-disabled);\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: var(--mj-shadow-sm);\n  --test-shadow-md: var(--mj-shadow-md);\n  --test-shadow-lg: var(--mj-shadow-lg);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n\n.breadcrumb[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  text-decoration: none;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  margin: 0 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%] {\n  color: var(--test-text-secondary);\n  font-weight: 500;\n}\n\n.breadcrumb-text[_ngcontent-%COMP%] {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.test-form[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n\n\n\n.test-header[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n.test-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.test-icon[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n\n.test-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n  word-wrap: break-word;\n}\n\n.test-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n.status-badge.status-disabled[_ngcontent-%COMP%] { background: var(--mj-text-secondary); }\n.status-badge.status-pending[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n\n.status-badge-inline[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active[_ngcontent-%COMP%] { background: var(--test-success); }\n.status-badge-inline.status-disabled[_ngcontent-%COMP%] { background: var(--test-disabled); }\n.status-badge-inline.status-pending[_ngcontent-%COMP%] { background: var(--test-warning); }\n\n.test-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  white-space: nowrap;\n}\n\n\n.test-description[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--test-radius-md);\n  margin-bottom: 16px;\n  border: 1px solid var(--test-border);\n}\n\n.test-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n\n\n\n.metrics-bar[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 14px;\n  text-align: center;\n  transition: var(--test-transition);\n}\n\n.metric-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  margin-bottom: 6px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n\n.metric-progress[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  height: 4px;\n  background: var(--test-border);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.metric-progress-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-status-success);\n  border-radius: 2px;\n  transition: width 0.5s ease-out;\n}\n\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 15px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--test-primary);\n}\n\n.tab-shortcut[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  margin-left: 4px;\n}\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  scroll-behavior: smooth;\n}\n\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n.info-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  word-wrap: break-word;\n  font-weight: 500;\n}\n\n\n.json-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.json-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 16px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n  flex-wrap: wrap;\n}\n\n.json-tab[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 100px;\n  padding: 10px 14px;\n  border: none;\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: var(--test-radius-sm);\n  transition: var(--test-transition);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.json-tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: var(--mj-bg-overlay);\n}\n\n.json-tab.active[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  font-weight: 600;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n  max-height: 400px;\n}\n\n\n\n\n.config-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.config-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.config-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.config-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n  background: var(--test-surface);\n}\n\n.config-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.config-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--test-text-muted);\n}\n\n.config-hint[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--test-text-muted);\n  margin-top: 4px;\n}\n\n.config-editor-container[_ngcontent-%COMP%] {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n}\n\n.config-editor-container.small[_ngcontent-%COMP%] {\n  min-height: 100px;\n  max-height: 150px;\n}\n\n\n\n\n.runs-tab[_ngcontent-%COMP%], \n.suites-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.skeleton-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-icon[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n  flex-shrink: 0;\n}\n\n.skeleton-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line[_ngcontent-%COMP%] {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide[_ngcontent-%COMP%] { width: 70%; }\n.skeleton-line.narrow[_ngcontent-%COMP%] { width: 40%; }\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n\n.runs-list[_ngcontent-%COMP%], \n.suites-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.run-item[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-item[_ngcontent-%COMP%]:hover, \n.suite-item[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.run-icon[_ngcontent-%COMP%], \n.suite-icon[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.suite-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n\n.run-content[_ngcontent-%COMP%], \n.suite-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 4px;\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-status[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.suite-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-meta[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  flex-wrap: wrap;\n}\n\n.run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 11px;\n}\n\n.run-item[_ngcontent-%COMP%]    > i.fa-chevron-right[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%]    > i.fa-chevron-right[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.run-item[_ngcontent-%COMP%]:hover    > i.fa-chevron-right[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%]:hover    > i.fa-chevron-right[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n.run-eval-stack[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n\n.eval-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.eval-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n.eval-pill.status-pill.status-passed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-pill.status-pill.status-failed[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-pill.status-pill.status-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.status-pill.status-timeout[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.status-pill.status-skipped[_ngcontent-%COMP%], \n.eval-pill.status-pill.status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.eval-pill.status-pill.status-running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n.eval-pill.human-pill.no-feedback[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n  padding: 4px 8px;\n}\n\n.eval-pill.human-pill.has-feedback.rating-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-pill.human-pill.has-feedback.rating-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.human-pill.has-feedback.rating-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-pill.human-pill.has-feedback.rating-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n.eval-pill.auto-pill.no-score[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n  padding: 4px 8px;\n}\n\n.eval-pill.auto-pill.has-score.score-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-pill.auto-pill.has-score.score-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-pill.auto-pill.has-score.score-good[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-pill.auto-pill.has-score.score-excellent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n\n.run-tags[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-tag[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.run-tag-more[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n\n\n\n\n.shortcuts-toggle[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.shortcut-keys[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n\n\n\n@media (max-width: 1024px) {\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .info-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .config-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .keyboard-shortcuts[_ngcontent-%COMP%], .shortcuts-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n\n@media (max-width: 768px) {\n  .test-form[_ngcontent-%COMP%] {\n    height: auto;\n    min-height: 100%;\n  }\n\n  .test-header[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-left[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .test-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 20px;\n  }\n\n  .test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .test-meta[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .status-badge[_ngcontent-%COMP%] {\n    padding: 4px 10px;\n    font-size: 11px;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px;\n  }\n\n  .metric-card[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .metric-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .tabs[_ngcontent-%COMP%] {\n    padding: 0 12px;\n  }\n\n  .tab[_ngcontent-%COMP%] {\n    padding: 12px 14px;\n    font-size: 13px;\n    gap: 6px;\n  }\n\n  .tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .tab-shortcut[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .info-section[_ngcontent-%COMP%], \n   .json-section[_ngcontent-%COMP%], \n   .config-section[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .info-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .json-tabs[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .json-tab[_ngcontent-%COMP%] {\n    min-width: 0;\n    justify-content: flex-start;\n  }\n\n  .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    padding: 14px;\n  }\n\n  .run-icon[_ngcontent-%COMP%], \n   .suite-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 16px;\n  }\n\n  .run-meta[_ngcontent-%COMP%], \n   .suite-meta[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n}\n\n\n\n\n@media (max-width: 480px) {\n  .test-header[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .header-left[_ngcontent-%COMP%] {\n    gap: 12px;\n  }\n\n  .test-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n    border-radius: 8px;\n  }\n\n  .test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .tabs[_ngcontent-%COMP%] {\n    padding: 0 8px;\n  }\n\n  .tab[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n\n  .tab-badge[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .run-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n}\n\n\n\n\n@media (hover: none) and (pointer: coarse) {\n  .tab[_ngcontent-%COMP%], \n   .json-tab[_ngcontent-%COMP%], \n   .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .run-item[_ngcontent-%COMP%]:active, \n   .suite-item[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    transform: scale(0.98);\n  }\n\n  .tab[_ngcontent-%COMP%]:active, \n   .json-tab[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  }\n\n  \n  .tab[_ngcontent-%COMP%] {\n    min-height: 48px;\n  }\n\n  .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    min-height: 64px;\n  }\n}\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  .skeleton-icon[_ngcontent-%COMP%], \n   .skeleton-line[_ngcontent-%COMP%] {\n    animation: none;\n    background: var(--mj-border-default);\n  }\n}\n\n\n\n\n.history-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.history-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n\n.history-filters[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.time-range-filters[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  margin-right: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--test-primary-light);\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n  background: var(--test-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--test-primary);\n}\n\n.history-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n.history-kpi-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-brand-primary);\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 20px;\n  flex-shrink: 0;\n}\n\n.kpi-icon.pass-rate[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 2px;\n}\n\n.trend-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.trend-icon.trend-up[_ngcontent-%COMP%] {\n  color: var(--test-success);\n}\n\n.trend-icon.trend-down[_ngcontent-%COMP%] {\n  color: var(--test-error);\n}\n\n\n.history-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.history-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.history-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n\n.history-table-container[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.history-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 14px;\n}\n\n.history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.history-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  text-align: left;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n}\n\n.history-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 3%, transparent);\n}\n\n.date-cell[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.passed-cell[_ngcontent-%COMP%] {\n  color: var(--test-success);\n  font-weight: 600;\n}\n\n.failed-cell[_ngcontent-%COMP%] {\n  color: var(--test-error);\n  font-weight: 600;\n}\n\n.pass-rate-cell[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.pass-rate-bar[_ngcontent-%COMP%] {\n  position: relative;\n  height: 24px;\n  background: var(--test-bg);\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.pass-rate-fill[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--mj-status-success);\n  border-radius: 12px;\n  transition: width 0.5s ease-out;\n}\n\n.pass-rate-text[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--test-text);\n  z-index: 1;\n}\n\n\n.suite-performance-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.suite-perf-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 18px;\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.suite-perf-header[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-perf-name[_ngcontent-%COMP%] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 6px;\n}\n\n.suite-perf-tags[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.tag-mini[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.tag-more[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.suite-perf-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  flex-wrap: wrap;\n}\n\n.suite-stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value.pass-rate.high[_ngcontent-%COMP%] {\n  color: var(--test-success);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value.pass-rate.low[_ngcontent-%COMP%] {\n  color: var(--test-error);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.suite-perf-arrow[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card[_ngcontent-%COMP%]:hover   .suite-perf-arrow[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n\n\n@media print {\n  .test-form[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    height: auto;\n  }\n\n  .header-actions[_ngcontent-%COMP%], \n   .tabs-container[_ngcontent-%COMP%], \n   .keyboard-shortcuts[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    overflow: visible;\n    padding: 0;\n  }\n\n  .info-section[_ngcontent-%COMP%], \n   .json-section[_ngcontent-%COMP%], \n   .config-section[_ngcontent-%COMP%] {\n    break-inside: avoid;\n    box-shadow: none;\n    border: 1px solid var(--mj-border-default);\n  }\n}\n\n\n\n\n\n.edit-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.edit-section-header[_ngcontent-%COMP%] {\n  margin: 0 0 18px 0;\n}\n\n.edit-section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.edit-section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.edit-section-sub[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.edit-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n}\n\n@media (max-width: 720px) {\n  .edit-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n.edit-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 0;\n}\n\n.edit-field--full[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.edit-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.edit-field[_ngcontent-%COMP%]   .required[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.config-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 72px;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.select-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.select-wrapper[_ngcontent-%COMP%]   select.config-input[_ngcontent-%COMP%] {\n  padding-right: 36px;\n  appearance: none;\n  background-color: var(--test-surface);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  background-size: 10px 7px;\n}\n\n\n.tag-editor[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  transition: var(--test-transition);\n  cursor: text;\n  min-height: 42px;\n  align-items: center;\n}\n\n.tag-editor[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tag-chip-editable[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 4px 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.tag-chip-editable[_ngcontent-%COMP%]   .tag-remove[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 10px;\n  transition: background 0.15s;\n}\n\n.tag-chip-editable[_ngcontent-%COMP%]   .tag-remove[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-input-inline[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 140px;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 13px;\n  color: var(--test-text);\n  padding: 4px 2px;\n}\n\n.tag-input-inline[_ngcontent-%COMP%]::placeholder {\n  color: var(--test-text-muted);\n}\n\n\n.meta-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--test-radius-md);\n  padding: 14px 18px;\n  border: 1px solid var(--test-border);\n}\n\n.meta-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 14px;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.meta-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.meta-mono[_ngcontent-%COMP%] {\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  font-size: 11px;\n}\n\n\n.dirty-indicator[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin-left: 8px;\n  font-size: 14px;\n  color: var(--mj-status-warning);\n  line-height: 1;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n  vertical-align: middle;\n}\n\n@keyframes _ngcontent-%COMP%_pulseDot {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n.unsaved-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.unsaved-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 6px;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n}\n\n\n\n.tab-content.has-savebar[_ngcontent-%COMP%] {\n  padding-bottom: 84px;\n}\n\n\n\n\n\n.save-bar[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 16px;\n  right: 96px; \n  bottom: 16px;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px 16px 12px 20px;\n  background: var(--mj-bg-surface-elevated, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, var(--test-border));\n  border-radius: 14px;\n  box-shadow: 0 12px 32px color-mix(in srgb, var(--mj-status-warning) 10%, rgba(0, 0, 0, 0.18));\n  backdrop-filter: blur(8px);\n  \n\n\n  opacity: 0;\n  transform: translateY(calc(100% + 32px));\n  pointer-events: none;\n  transition:\n    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n}\n\n.save-bar--visible[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .save-bar[_ngcontent-%COMP%] {\n    transition: opacity 180ms ease-out;\n    transform: none;\n  }\n  .save-bar--visible[_ngcontent-%COMP%] {\n    transform: none;\n  }\n}\n\n.save-bar-message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.save-bar-dot[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: 12px;\n  line-height: 1;\n  animation: _ngcontent-%COMP%_pulseDot 1.8s ease-in-out infinite;\n}\n\n.save-bar-text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.save-bar-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.save-bar-fields[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.save-bar-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.save-bar-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: var(--test-transition);\n  font-family: inherit;\n}\n\n.save-bar-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n\n.save-bar-btn--primary[_ngcontent-%COMP%]:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.save-bar-btn--ghost[_ngcontent-%COMP%] {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.save-bar-btn--ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n  border-color: var(--test-text-muted);\n}\n\n.save-bar-kbd[_ngcontent-%COMP%] {\n  display: inline-flex;\n  gap: 3px;\n  margin-left: 6px;\n  opacity: 0.85;\n}\n\n.save-bar-kbd[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  background: color-mix(in srgb, white 18%, transparent);\n  border: 1px solid color-mix(in srgb, white 35%, transparent);\n  border-radius: 4px;\n  color: inherit;\n}\n\n@media (max-width: 640px) {\n  .save-bar[_ngcontent-%COMP%] {\n    left: 8px;\n    right: 8px;\n    bottom: 88px; \n    flex-direction: column;\n    align-items: stretch;\n    padding: 12px;\n  }\n  .save-bar-actions[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  .save-bar-kbd[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"], changeDetection: 0 }); }
 };
 MJTestFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Tests')