@memberjunction/ng-dashboards 5.14.0 → 5.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/dist/AI/components/execution-monitoring.component.js +3 -3
  2. package/dist/APIKeys/api-applications-panel.component.js +4 -4
  3. package/dist/APIKeys/api-key-create-dialog.component.js +4 -4
  4. package/dist/APIKeys/api-key-edit-panel.component.js +4 -4
  5. package/dist/APIKeys/api-scopes-panel.component.js +5 -5
  6. package/dist/APIKeys/api-usage-panel.component.js +3 -3
  7. package/dist/Actions/components/actions-list-view.component.js +4 -4
  8. package/dist/Actions/components/actions-overview.component.js +5 -5
  9. package/dist/Actions/components/categories-list-view.component.js +4 -4
  10. package/dist/Actions/components/execution-monitoring.component.js +4 -4
  11. package/dist/Actions/components/explorer/action-toolbar.component.js +3 -3
  12. package/dist/Actions/components/explorer/action-tree-panel.component.js +3 -3
  13. package/dist/Actions/components/explorer/new-action-panel.component.js +4 -4
  14. package/dist/Actions/components/explorer/new-category-panel.component.js +4 -4
  15. package/dist/ComponentStudio/components/artifact-load-dialog.component.js +3 -3
  16. package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +3 -3
  17. package/dist/ComponentStudio/components/browser/component-browser.component.js +3 -3
  18. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +3 -3
  19. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +3 -3
  20. package/dist/ComponentStudio/components/editors/requirements-editor.component.js +3 -3
  21. package/dist/ComponentStudio/components/editors/spec-editor.component.js +3 -3
  22. package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +3 -3
  23. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +4 -4
  24. package/dist/ComponentStudio/components/text-import-dialog.component.js +3 -3
  25. package/dist/DataExplorer/data-explorer-dashboard.component.js +1 -1
  26. package/dist/Home/home-dashboard.component.js +3 -3
  27. package/dist/QueryBrowser/query-browser-resource.component.js +3 -3
  28. package/dist/actions-dashboards.module.d.ts +42 -0
  29. package/dist/actions-dashboards.module.d.ts.map +1 -0
  30. package/dist/actions-dashboards.module.js +156 -0
  31. package/dist/actions-dashboards.module.js.map +1 -0
  32. package/dist/ai-dashboards.module.d.ts +43 -0
  33. package/dist/ai-dashboards.module.d.ts.map +1 -0
  34. package/dist/ai-dashboards.module.js +169 -0
  35. package/dist/ai-dashboards.module.js.map +1 -0
  36. package/dist/communication-dashboards.module.d.ts +26 -0
  37. package/dist/communication-dashboards.module.d.ts.map +1 -0
  38. package/dist/communication-dashboards.module.js +93 -0
  39. package/dist/communication-dashboards.module.js.map +1 -0
  40. package/dist/component-studio-dashboards.module.d.ts +37 -0
  41. package/dist/component-studio-dashboards.module.d.ts.map +1 -0
  42. package/dist/component-studio-dashboards.module.js +131 -0
  43. package/dist/component-studio-dashboards.module.js.map +1 -0
  44. package/dist/core-dashboards.module.d.ts +49 -0
  45. package/dist/core-dashboards.module.d.ts.map +1 -0
  46. package/dist/core-dashboards.module.js +197 -0
  47. package/dist/core-dashboards.module.js.map +1 -0
  48. package/dist/credentials-dashboards.module.d.ts +27 -0
  49. package/dist/credentials-dashboards.module.d.ts.map +1 -0
  50. package/dist/credentials-dashboards.module.js +100 -0
  51. package/dist/credentials-dashboards.module.js.map +1 -0
  52. package/dist/data-explorer-dashboards.module.d.ts +32 -0
  53. package/dist/data-explorer-dashboards.module.d.ts.map +1 -0
  54. package/dist/data-explorer-dashboards.module.js +110 -0
  55. package/dist/data-explorer-dashboards.module.js.map +1 -0
  56. package/dist/lists-dashboards.module.d.ts +25 -0
  57. package/dist/lists-dashboards.module.d.ts.map +1 -0
  58. package/dist/lists-dashboards.module.js +94 -0
  59. package/dist/lists-dashboards.module.js.map +1 -0
  60. package/dist/module.d.ts +31 -150
  61. package/dist/module.d.ts.map +1 -1
  62. package/dist/module.js +109 -735
  63. package/dist/module.js.map +1 -1
  64. package/dist/public-api.d.ts +11 -1
  65. package/dist/public-api.d.ts.map +1 -1
  66. package/dist/public-api.js +15 -2
  67. package/dist/public-api.js.map +1 -1
  68. package/dist/scheduling-dashboards.module.d.ts +29 -0
  69. package/dist/scheduling-dashboards.module.d.ts.map +1 -0
  70. package/dist/scheduling-dashboards.module.js +106 -0
  71. package/dist/scheduling-dashboards.module.js.map +1 -0
  72. package/dist/shared/shared-dashboard-widgets.module.d.ts +16 -0
  73. package/dist/shared/shared-dashboard-widgets.module.d.ts.map +1 -0
  74. package/dist/shared/shared-dashboard-widgets.module.js +40 -0
  75. package/dist/shared/shared-dashboard-widgets.module.js.map +1 -0
  76. package/dist/testing-dashboards.module.d.ts +38 -0
  77. package/dist/testing-dashboards.module.d.ts.map +1 -0
  78. package/dist/testing-dashboards.module.js +145 -0
  79. package/dist/testing-dashboards.module.js.map +1 -0
  80. package/package.json +100 -42
package/dist/AI/components/execution-monitoring.component.js CHANGED
@@ -17,8 +17,8 @@ import * as i3 from "@angular/forms";
17
17
  import * as i4 from "@progress/kendo-angular-layout";
18
18
  import * as i5 from "@memberjunction/ng-shared-generic";
19
19
  import * as i6 from "./widgets/kpi-card.component";
20
- import * as i7 from "./widgets/live-execution-widget.component";
21
- import * as i8 from "./charts/time-series-chart.component";
20
+ import * as i7 from "./charts/time-series-chart.component";
21
+ import * as i8 from "./widgets/live-execution-widget.component";
22
22
  import * as i9 from "./charts/performance-heatmap.component";
23
23
  import * as i10 from "@angular/common";
24
24
  const _c0 = () => [];
@@ -1492,7 +1492,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
1492
1492
  i0.ɵɵconditional(ctx.panelStates.executions ? 79 : -1);
1493
1493
  i0.ɵɵadvance();
1494
1494
  i0.ɵɵconditional(ctx.selectedExecution ? 80 : -1);
1495
- } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitterComponent, i4.SplitterPaneComponent, i5.LoadingComponent, i6.KPICardComponent, i7.LiveExecutionWidgetComponent, i8.TimeSeriesChartComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n padding: 0;\n background: var(--mj-bg-surface-card);\n width: 100%;\n height: 100%;\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n }\n\n .execution-monitoring.loading[_ngcontent-%COMP%] {\n overflow: hidden;\n }\n\n \n\n .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n z-index: 999;\n display: flex;\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(4px);\n }\n\n \n\n .monitoring-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n padding: 16px 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n border-bottom: 1px solid var(--mj-border-default);\n position: relative;\n z-index: 10;\n }\n\n .monitoring-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .monitoring-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 22px;\n }\n\n .monitoring-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .time-range-control[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n }\n\n .time-range-control[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-weight: 500;\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n padding: 8px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 13px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_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 .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%] option[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n }\n\n .refresh-btn[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n }\n\n .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n }\n\n .refresh-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .refresh-btn[_ngcontent-%COMP%] i.spinning[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n }\n\n @keyframes _ngcontent-%COMP%_spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .kpi-dashboard[_ngcontent-%COMP%] {\n padding: 20px;\n }\n\n .kpi-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 16px;\n }\n\n .dashboard-splitter[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 500px;\n margin: 0 20px 20px 20px;\n }\n\n .dashboard-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .dashboard-section[_ngcontent-%COMP%]:hover {\n box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n }\n\n \n\n [_nghost-%COMP%] .k-splitter-pane {\n overflow: hidden;\n }\n\n [_nghost-%COMP%] .k-splitter .k-splitter-pane {\n padding: 10px;\n }\n\n [_nghost-%COMP%] .k-splitter-horizontal > .k-splitter-pane {\n padding: 10px 5px;\n }\n\n [_nghost-%COMP%] .k-splitter-vertical > .k-splitter-pane {\n padding: 5px 10px;\n }\n\n \n\n .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n padding: 20px;\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .chart-header[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n }\n\n .chart-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .chart-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n }\n\n .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .cost-bar-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .cost-bar-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n }\n\n .cost-bar-info[_ngcontent-%COMP%] {\n min-width: 120px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .model-name[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .cost-value[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .cost-bar-container[_ngcontent-%COMP%] {\n flex: 1;\n height: 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n border-radius: 4px;\n overflow: hidden;\n }\n\n .cost-bar[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mj-brand-primary);\n border-radius: 4px;\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .token-info[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-muted);\n min-width: 80px;\n text-align: right;\n }\n\n \n\n .efficiency-item[_ngcontent-%COMP%] {\n padding: 12px 0;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .efficiency-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n }\n\n .efficiency-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .efficiency-ratio[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .token-breakdown[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .token-bar[_ngcontent-%COMP%] {\n height: 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n }\n\n .token-segment[_ngcontent-%COMP%] {\n height: 100%;\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .token-segment--input[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n }\n\n .token-segment--output[_ngcontent-%COMP%] {\n background: var(--mj-brand-accent);\n }\n\n .token-labels[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n color: var(--mj-text-muted);\n }\n\n .input-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 500;\n }\n\n .output-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-accent);\n font-weight: 500;\n }\n\n .cost-per-token[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n margin-top: 4px;\n }\n\n \n\n .status-metrics[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n }\n\n .status-metric[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n }\n\n .status-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .status-icon--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 }\n\n .status-icon--warning[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n }\n\n .status-icon--info[_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 .status-icon--primary[_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 .status-info[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .status-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n font-weight: 500;\n }\n\n .status-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 2px 0;\n }\n\n .status-subtitle[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n }\n\n \n\n .execution-modal[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n }\n\n .execution-modal-content[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 8px;\n max-width: 800px;\n width: 100%;\n max-height: 80vh;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .execution-modal-header[_ngcontent-%COMP%] {\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .execution-modal-header[_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 .modal-header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n }\n\n .open-record-btn[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n }\n\n .open-record-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n }\n\n .open-record-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n font-size: 16px;\n color: var(--mj-text-disabled);\n cursor: pointer;\n padding: 4px;\n }\n\n .close-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n }\n\n .execution-modal-body[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n }\n\n .execution-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n border-bottom: 1px solid var(--mj-border-default);\n padding-bottom: 6px;\n }\n\n .detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n }\n\n .detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .detail-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .detail-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n }\n\n .status-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n }\n\n .status-badge--completed[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n }\n\n .status-badge--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 .status-badge--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 .error-message[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-warning);\n border-radius: 4px;\n padding: 12px;\n font-size: 12px;\n color: var(--mj-status-error);\n font-family: monospace;\n }\n\n .child-executions[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .child-execution[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: 4px;\n padding: 12px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .child-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .child-name[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .child-type[_ngcontent-%COMP%] {\n font-size: 10px;\n background: var(--mj-border-default);\n padding: 2px 6px;\n border-radius: 3px;\n color: var(--mj-text-muted);\n }\n\n .child-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n }\n\n .child-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 11px;\n color: var(--mj-text-muted);\n }\n\n .loading-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n gap: 12px;\n }\n\n \n\n .drill-down-container[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .drill-down-tabs[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .tab-header[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n background: var(--mj-bg-surface-card);\n min-height: 44px;\n overflow-x: auto;\n }\n\n .tab-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n white-space: nowrap;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n min-width: 120px;\n justify-content: space-between;\n }\n\n .tab-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n color: var(--mj-brand-primary);\n }\n\n .tab-item.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .tab-title[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .tab-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-disabled);\n cursor: pointer;\n padding: 2px;\n border-radius: 2px;\n font-size: 10px;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n }\n\n .tab-close[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.1);\n color: var(--mj-text-primary);\n }\n\n .tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .tab-pane[_ngcontent-%COMP%] {\n height: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .trends-chart[_ngcontent-%COMP%] {\n padding: 0;\n }\n\n .trends-chart[_ngcontent-%COMP%] app-time-series-chart[_ngcontent-%COMP%] {\n height: 100%;\n display: block;\n overflow: hidden;\n }\n\n \n\n .tab-pane.trends-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n \n\n .executions-drill-down[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n }\n\n .drill-down-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .drill-down-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .drill-down-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n font-size: 12px;\n }\n\n .timestamp[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n padding: 4px 8px;\n border-radius: 4px;\n }\n\n .metric-badge[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 4px 10px;\n border-radius: 6px;\n font-weight: 600;\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n }\n\n .loading-spinner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n color: var(--mj-text-muted);\n gap: 12px;\n }\n\n .executions-table[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n }\n\n .table-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n gap: 12px;\n background: var(--mj-bg-surface-card);\n padding: 12px 16px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .table-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n gap: 12px;\n padding: 12px 16px;\n border-top: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background 0.2s ease;\n align-items: center;\n }\n\n .table-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n }\n\n .table-cell[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .type-badge[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n color: var(--mj-text-muted);\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n }\n\n .type-badge--prompt[_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 .type-badge--agent[_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 .no-data[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n color: var(--mj-text-disabled);\n gap: 16px;\n }\n\n .no-data[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-border-default);\n }\n\n .no-data[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n }\n\n \n\n .model-detail[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n }\n\n .model-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n .model-info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n }\n\n .info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n }\n\n .info-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin: 0;\n }\n\n .info-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n font-weight: 500;\n }\n\n .status-indicator[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n }\n\n .status-indicator.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n }\n\n .status-indicator.active[_ngcontent-%COMP%]::before {\n content: '';\n width: 6px;\n height: 6px;\n background: var(--mj-status-success);\n border-radius: 50%;\n }\n\n .model-description[_ngcontent-%COMP%] {\n padding: 20px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n }\n\n .model-description[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n }\n\n .model-description[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.5;\n }\n\n \n\n .clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n \n\n .analysis-panels[_ngcontent-%COMP%] {\n padding: 12px;\n height: 100%;\n overflow-y: auto;\n background: var(--mj-bg-surface-card);\n }\n\n .analysis-panel[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n border-radius: 10px;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n background: var(--mj-bg-surface);\n overflow: hidden;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .analysis-panel[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n }\n\n .analysis-panel[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n }\n\n .panel-header[_ngcontent-%COMP%] {\n padding: 14px 18px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .panel-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 14px;\n }\n\n .panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n width: 18px;\n }\n\n .panel-toggle-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 12px;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .panel-content[_ngcontent-%COMP%] {\n padding: 18px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n @keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n }\n }\n\n .live-executions-panel[_ngcontent-%COMP%] {\n padding: 0;\n }\n\n .live-executions-panel[_ngcontent-%COMP%] app-live-execution-widget[_ngcontent-%COMP%] {\n height: 300px;\n display: block;\n }\n\n \n\n @media (max-width: 1200px) {\n .dashboard-splitter[_ngcontent-%COMP%] {\n min-height: 400px;\n }\n \n .table-header[_ngcontent-%COMP%], \n .table-row[_ngcontent-%COMP%] {\n grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n gap: 8px;\n }\n \n .model-info-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .analysis-panels[_ngcontent-%COMP%] {\n padding: 8px;\n }\n \n .analysis-panel[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n }\n }\n\n @media (max-width: 768px) {\n .execution-monitoring[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .monitoring-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n }\n \n .monitoring-controls[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n }\n \n .dashboard-splitter[_ngcontent-%COMP%] {\n min-height: 350px;\n }\n \n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n }\n\n \n\n [_nghost-%COMP%] .k-splitter .k-splitter-pane {\n padding: 5px;\n }\n\n [_nghost-%COMP%] .k-splitter-horizontal > .k-splitter-pane {\n padding: 5px 2px;\n }\n\n [_nghost-%COMP%] .k-splitter-vertical > .k-splitter-pane {\n padding: 2px 5px;\n }\n \n .tab-header[_ngcontent-%COMP%] {\n overflow-x: auto;\n }\n \n .tab-item[_ngcontent-%COMP%] {\n min-width: 100px;\n padding: 6px 12px;\n }\n \n .table-header[_ngcontent-%COMP%], \n .table-row[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 4px;\n text-align: left;\n }\n \n .table-row[_ngcontent-%COMP%] {\n display: block;\n padding: 16px;\n }\n \n .table-cell[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n }\n \n .table-cell[_ngcontent-%COMP%]:before {\n content: attr(data-label) ': ';\n font-weight: 600;\n color: var(--mj-text-muted);\n font-size: 11px;\n text-transform: uppercase;\n }\n \n .executions-drill-down[_ngcontent-%COMP%], \n .model-detail[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .panel-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .panel-header[_ngcontent-%COMP%] {\n padding: 10px 12px;\n }\n \n .panel-title[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n }"], changeDetection: 0 });
1495
+ } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitterComponent, i4.SplitterPaneComponent, i5.LoadingComponent, i6.KPICardComponent, i7.TimeSeriesChartComponent, i8.LiveExecutionWidgetComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n padding: 0;\n background: var(--mj-bg-surface-card);\n width: 100%;\n height: 100%;\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n }\n\n .execution-monitoring.loading[_ngcontent-%COMP%] {\n overflow: hidden;\n }\n\n \n\n .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n z-index: 999;\n display: flex;\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(4px);\n }\n\n \n\n .monitoring-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n padding: 16px 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n border-bottom: 1px solid var(--mj-border-default);\n position: relative;\n z-index: 10;\n }\n\n .monitoring-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .monitoring-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 22px;\n }\n\n .monitoring-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .time-range-control[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n }\n\n .time-range-control[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-weight: 500;\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n padding: 8px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 13px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_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 .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .time-range-control[_ngcontent-%COMP%] select[_ngcontent-%COMP%] option[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n }\n\n .refresh-btn[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n }\n\n .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n }\n\n .refresh-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .refresh-btn[_ngcontent-%COMP%] i.spinning[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_spin 1s linear infinite;\n }\n\n @keyframes _ngcontent-%COMP%_spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .kpi-dashboard[_ngcontent-%COMP%] {\n padding: 20px;\n }\n\n .kpi-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 16px;\n }\n\n .dashboard-splitter[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 500px;\n margin: 0 20px 20px 20px;\n }\n\n .dashboard-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .dashboard-section[_ngcontent-%COMP%]:hover {\n box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n }\n\n \n\n [_nghost-%COMP%] .k-splitter-pane {\n overflow: hidden;\n }\n\n [_nghost-%COMP%] .k-splitter .k-splitter-pane {\n padding: 10px;\n }\n\n [_nghost-%COMP%] .k-splitter-horizontal > .k-splitter-pane {\n padding: 10px 5px;\n }\n\n [_nghost-%COMP%] .k-splitter-vertical > .k-splitter-pane {\n padding: 5px 10px;\n }\n\n \n\n .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n padding: 20px;\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .chart-header[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n }\n\n .chart-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .chart-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n }\n\n .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .cost-bar-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .cost-bar-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n }\n\n .cost-bar-info[_ngcontent-%COMP%] {\n min-width: 120px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .model-name[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .cost-value[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .cost-bar-container[_ngcontent-%COMP%] {\n flex: 1;\n height: 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n border-radius: 4px;\n overflow: hidden;\n }\n\n .cost-bar[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mj-brand-primary);\n border-radius: 4px;\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .token-info[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-muted);\n min-width: 80px;\n text-align: right;\n }\n\n \n\n .efficiency-item[_ngcontent-%COMP%] {\n padding: 12px 0;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .efficiency-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n }\n\n .efficiency-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .efficiency-ratio[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .token-breakdown[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .token-bar[_ngcontent-%COMP%] {\n height: 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n }\n\n .token-segment[_ngcontent-%COMP%] {\n height: 100%;\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .token-segment--input[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n }\n\n .token-segment--output[_ngcontent-%COMP%] {\n background: var(--mj-brand-accent);\n }\n\n .token-labels[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n color: var(--mj-text-muted);\n }\n\n .input-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 500;\n }\n\n .output-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-accent);\n font-weight: 500;\n }\n\n .cost-per-token[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n margin-top: 4px;\n }\n\n \n\n .status-metrics[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n }\n\n .status-metric[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n }\n\n .status-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .status-icon--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 }\n\n .status-icon--warning[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n }\n\n .status-icon--info[_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 .status-icon--primary[_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 .status-info[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .status-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n font-weight: 500;\n }\n\n .status-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 2px 0;\n }\n\n .status-subtitle[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n }\n\n \n\n .execution-modal[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n }\n\n .execution-modal-content[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 8px;\n max-width: 800px;\n width: 100%;\n max-height: 80vh;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .execution-modal-header[_ngcontent-%COMP%] {\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .execution-modal-header[_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 .modal-header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n }\n\n .open-record-btn[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n }\n\n .open-record-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n }\n\n .open-record-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n font-size: 16px;\n color: var(--mj-text-disabled);\n cursor: pointer;\n padding: 4px;\n }\n\n .close-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n }\n\n .execution-modal-body[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n }\n\n .execution-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .detail-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n border-bottom: 1px solid var(--mj-border-default);\n padding-bottom: 6px;\n }\n\n .detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n }\n\n .detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .detail-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .detail-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n }\n\n .status-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n }\n\n .status-badge--completed[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n }\n\n .status-badge--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 .status-badge--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 .error-message[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-warning);\n border-radius: 4px;\n padding: 12px;\n font-size: 12px;\n color: var(--mj-status-error);\n font-family: monospace;\n }\n\n .child-executions[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .child-execution[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: 4px;\n padding: 12px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .child-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .child-name[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .child-type[_ngcontent-%COMP%] {\n font-size: 10px;\n background: var(--mj-border-default);\n padding: 2px 6px;\n border-radius: 3px;\n color: var(--mj-text-muted);\n }\n\n .child-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n }\n\n .child-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 11px;\n color: var(--mj-text-muted);\n }\n\n .loading-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n gap: 12px;\n }\n\n \n\n .drill-down-container[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .drill-down-tabs[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .tab-header[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n background: var(--mj-bg-surface-card);\n min-height: 44px;\n overflow-x: auto;\n }\n\n .tab-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n white-space: nowrap;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n min-width: 120px;\n justify-content: space-between;\n }\n\n .tab-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n color: var(--mj-brand-primary);\n }\n\n .tab-item.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .tab-title[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .tab-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-disabled);\n cursor: pointer;\n padding: 2px;\n border-radius: 2px;\n font-size: 10px;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n }\n\n .tab-close[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.1);\n color: var(--mj-text-primary);\n }\n\n .tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .tab-pane[_ngcontent-%COMP%] {\n height: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .trends-chart[_ngcontent-%COMP%] {\n padding: 0;\n }\n\n .trends-chart[_ngcontent-%COMP%] app-time-series-chart[_ngcontent-%COMP%] {\n height: 100%;\n display: block;\n overflow: hidden;\n }\n\n \n\n .tab-pane.trends-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n \n\n .executions-drill-down[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n }\n\n .drill-down-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .drill-down-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .drill-down-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n font-size: 12px;\n }\n\n .timestamp[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n padding: 4px 8px;\n border-radius: 4px;\n }\n\n .metric-badge[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 4px 10px;\n border-radius: 6px;\n font-weight: 600;\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n }\n\n .loading-spinner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px;\n color: var(--mj-text-muted);\n gap: 12px;\n }\n\n .executions-table[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n }\n\n .table-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n gap: 12px;\n background: var(--mj-bg-surface-card);\n padding: 12px 16px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .table-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n gap: 12px;\n padding: 12px 16px;\n border-top: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background 0.2s ease;\n align-items: center;\n }\n\n .table-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n }\n\n .table-cell[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .type-badge[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n color: var(--mj-text-muted);\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n }\n\n .type-badge--prompt[_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 .type-badge--agent[_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 .no-data[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n color: var(--mj-text-disabled);\n gap: 16px;\n }\n\n .no-data[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-border-default);\n }\n\n .no-data[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n }\n\n \n\n .model-detail[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n }\n\n .model-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n .model-info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n }\n\n .info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n }\n\n .info-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin: 0;\n }\n\n .info-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n font-weight: 500;\n }\n\n .status-indicator[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n }\n\n .status-indicator.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n }\n\n .status-indicator.active[_ngcontent-%COMP%]::before {\n content: '';\n width: 6px;\n height: 6px;\n background: var(--mj-status-success);\n border-radius: 50%;\n }\n\n .model-description[_ngcontent-%COMP%] {\n padding: 20px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n }\n\n .model-description[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n }\n\n .model-description[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.5;\n }\n\n \n\n .clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n \n\n .analysis-panels[_ngcontent-%COMP%] {\n padding: 12px;\n height: 100%;\n overflow-y: auto;\n background: var(--mj-bg-surface-card);\n }\n\n .analysis-panel[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n border-radius: 10px;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n background: var(--mj-bg-surface);\n overflow: hidden;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .analysis-panel[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n }\n\n .analysis-panel[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n }\n\n .panel-header[_ngcontent-%COMP%] {\n padding: 14px 18px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .panel-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 14px;\n }\n\n .panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n width: 18px;\n }\n\n .panel-toggle-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 12px;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .panel-content[_ngcontent-%COMP%] {\n padding: 18px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n @keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n }\n }\n\n .live-executions-panel[_ngcontent-%COMP%] {\n padding: 0;\n }\n\n .live-executions-panel[_ngcontent-%COMP%] app-live-execution-widget[_ngcontent-%COMP%] {\n height: 300px;\n display: block;\n }\n\n \n\n @media (max-width: 1200px) {\n .dashboard-splitter[_ngcontent-%COMP%] {\n min-height: 400px;\n }\n \n .table-header[_ngcontent-%COMP%], \n .table-row[_ngcontent-%COMP%] {\n grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n gap: 8px;\n }\n \n .model-info-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .analysis-panels[_ngcontent-%COMP%] {\n padding: 8px;\n }\n \n .analysis-panel[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n }\n }\n\n @media (max-width: 768px) {\n .execution-monitoring[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .monitoring-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n }\n \n .monitoring-controls[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n }\n \n .dashboard-splitter[_ngcontent-%COMP%] {\n min-height: 350px;\n }\n \n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n }\n\n \n\n [_nghost-%COMP%] .k-splitter .k-splitter-pane {\n padding: 5px;\n }\n\n [_nghost-%COMP%] .k-splitter-horizontal > .k-splitter-pane {\n padding: 5px 2px;\n }\n\n [_nghost-%COMP%] .k-splitter-vertical > .k-splitter-pane {\n padding: 2px 5px;\n }\n \n .tab-header[_ngcontent-%COMP%] {\n overflow-x: auto;\n }\n \n .tab-item[_ngcontent-%COMP%] {\n min-width: 100px;\n padding: 6px 12px;\n }\n \n .table-header[_ngcontent-%COMP%], \n .table-row[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 4px;\n text-align: left;\n }\n \n .table-row[_ngcontent-%COMP%] {\n display: block;\n padding: 16px;\n }\n \n .table-cell[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n }\n \n .table-cell[_ngcontent-%COMP%]:before {\n content: attr(data-label) ': ';\n font-weight: 600;\n color: var(--mj-text-muted);\n font-size: 11px;\n text-transform: uppercase;\n }\n \n .executions-drill-down[_ngcontent-%COMP%], \n .model-detail[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .panel-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n \n .panel-header[_ngcontent-%COMP%] {\n padding: 10px 12px;\n }\n \n .panel-title[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n }"], changeDetection: 0 });
1496
1496
  };
1497
1497
  ExecutionMonitoringComponent = __decorate([
1498
1498
  RegisterClass(BaseResourceComponent, 'AIMonitorResource')
package/dist/APIKeys/api-applications-panel.component.js CHANGED
@@ -6,9 +6,9 @@ import { UUIDsEqual } from '@memberjunction/global';
6
6
  import * as i0 from "@angular/core";
7
7
  import * as i1 from "@angular/common";
8
8
  import * as i2 from "@angular/forms";
9
- import * as i3 from "@progress/kendo-angular-dropdowns";
10
- import * as i4 from "@progress/kendo-angular-inputs";
11
- import * as i5 from "@progress/kendo-angular-buttons";
9
+ import * as i3 from "@progress/kendo-angular-buttons";
10
+ import * as i4 from "@progress/kendo-angular-dropdowns";
11
+ import * as i5 from "@progress/kendo-angular-inputs";
12
12
  import * as i6 from "@memberjunction/ng-shared-generic";
13
13
  const _c0 = () => ["Include", "Exclude"];
14
14
  function APIApplicationsPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -1045,7 +1045,7 @@ export class APIApplicationsPanelComponent {
1045
1045
  i0.ɵɵconditional(ctx.IsSaving ? 61 : -1);
1046
1046
  i0.ɵɵadvance();
1047
1047
  i0.ɵɵconditional(!ctx.IsSaving ? 62 : -1);
1048
- } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextBoxDirective, i4.TextAreaDirective, i4.CheckBoxDirective, i5.ButtonComponent, i6.LoadingComponent], styles: [".applications-panel[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.applications-panel.panel-open[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n.btn-create[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-weight: 600;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n margin-bottom: 16px;\n font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success-border);\n}\n\n.message.error[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error-border);\n}\n\n\n\n.applications-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n overflow-y: auto;\n}\n\n.app-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-md);\n overflow: hidden;\n transition: box-shadow 0.2s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-lg);\n}\n\n.app-card.inactive[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.app-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 16px 20px;\n gap: 12px;\n}\n\n.app-header-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex: 1;\n cursor: pointer;\n transition: background 0.2s ease;\n border-radius: 8px;\n padding: 4px;\n margin: -4px;\n}\n\n.app-header-main[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.app-edit-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.app-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.app-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: 10px;\n margin-right: 16px;\n flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-text-inverse);\n}\n\n.app-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.app-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.app-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-left: 16px;\n}\n\n.scope-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.scope-count[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n}\n\n\n\n.app-details[_ngcontent-%COMP%] {\n padding: 0 20px 20px 20px;\n border-top: 1px solid var(--mj-border-default);\n margin-top: 0;\n}\n\n.details-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.details-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n}\n\n.scope-rules[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.scope-rule[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n padding: 10px 12px;\n background: var(--mj-bg-page);\n border-radius: 8px;\n}\n\n.rule-icon[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n margin-right: 12px;\n flex-shrink: 0;\n}\n\n.rule-icon.pattern-include[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.rule-icon.pattern-exclude[_ngcontent-%COMP%] {\n background: var(--mj-color-brand-100);\n color: var(--mj-brand-primary-hover);\n}\n\n.rule-icon.pattern-deny[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-color-error-600);\n}\n\n.rule-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.rule-scope[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.rule-pattern[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n flex-wrap: wrap;\n}\n\n.rule-pattern[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n background: var(--mj-bg-surface-active);\n padding: 2px 6px;\n border-radius: 4px;\n color: var(--mj-text-primary);\n}\n\n.pattern-type[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n.priority[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n}\n\n.empty-scopes[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 24px;\n color: var(--mj-text-secondary);\n text-align: center;\n background: var(--mj-bg-page);\n border-radius: 8px;\n}\n\n.empty-scopes[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n margin-bottom: 8px;\n opacity: 0.5;\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 100;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n width: 570px;\n height: 100%;\n max-height: 100%;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px var(--mj-bg-overlay);\n z-index: 101;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n transform: translateX(100%);\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.slideout-resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n width: 6px;\n height: 100%;\n cursor: ew-resize;\n background: transparent;\n z-index: 10;\n transition: background 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover, \n.slideout-resize-handle.resizing[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 2px;\n height: 40px;\n background: var(--mj-color-neutral-300);\n border-radius: 2px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover::after {\n opacity: 1;\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n flex: 1;\n min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n padding: 3px 10px;\n border-radius: 12px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.status-pill.active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n background: transparent;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.slideout-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active) .tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default); \n\n color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.scopes-panel[_ngcontent-%COMP%] {\n height: 100%;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 8px;\n letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n resize: vertical;\n min-height: 80px;\n}\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within {\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default); \n\n flex-shrink: 0;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button {\n min-width: 100px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-radius: 10px;\n border: 1px solid var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-color-neutral-300);\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n font-weight: 600;\n color: var(--mj-text-secondary);\n font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n line-height: 1.4;\n}\n\n\n\n\n\n\n\n\n\n.scopes-intro[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-status-info-bg);\n border: 1px solid var(--mj-status-info-border);\n border-radius: 10px;\n font-size: 13px;\n color: var(--mj-status-info-text);\n margin-bottom: 16px;\n line-height: 1.4;\n}\n\n.scopes-intro[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n font-size: 14px;\n flex-shrink: 0;\n margin-top: 1px;\n}\n\n.scope-categories-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.category-count-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.category-chevron[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 11px;\n}\n\n.category-scopes-list[_ngcontent-%COMP%] {\n border-top: 1px solid var(--mj-border-default); \n\n padding: 8px;\n max-height: 280px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.scope-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-radius: 8px;\n background: var(--mj-bg-page);\n transition: all 0.2s ease;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.scope-row.selected[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n border: 1px solid var(--mj-color-violet-300);\n}\n\n.scope-select[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n flex: 1;\n min-width: 0;\n cursor: pointer;\n}\n\n.scope-select[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.scope-path[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-family: 'SF Mono', 'Consolas', monospace;\n word-break: break-word;\n}\n\n.scope-description[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 2px;\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n\n.scope-pattern-display[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-left: auto;\n flex-shrink: 0;\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n.pattern-tag[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n.pattern-tag.include[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.pattern-tag.exclude[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n.pattern-tag[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.scope-pattern-config[_ngcontent-%COMP%] {\n display: none;\n gap: 6px;\n margin-left: auto;\n flex-shrink: 0;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover .scope-pattern-config[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%] .scope-pattern-config[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover .scope-pattern-display[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%] .scope-pattern-display[_ngcontent-%COMP%] {\n display: none;\n}\n\n.pattern-field[_ngcontent-%COMP%] {\n width: 60px;\n}\n\n[_nghost-%COMP%] .pattern-field .k-input {\n padding: 3px 6px;\n font-size: 11px;\n border-radius: 4px;\n height: 26px;\n}\n\n.type-field[_ngcontent-%COMP%] {\n width: 75px;\n}\n\n[_nghost-%COMP%] .type-field .k-dropdownlist {\n font-size: 11px;\n height: 26px;\n}\n\n[_nghost-%COMP%] .type-field .k-input-inner {\n padding: 2px 6px;\n font-size: 11px;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 32px;\n color: var(--mj-text-muted);\n text-align: center;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.5;\n}\n\n\n"] });
1048
+ } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.DropDownListComponent, i5.TextBoxDirective, i5.TextAreaDirective, i5.CheckBoxDirective, i6.LoadingComponent], styles: [".applications-panel[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.applications-panel.panel-open[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n.btn-create[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-weight: 600;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n margin-bottom: 16px;\n font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success-border);\n}\n\n.message.error[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error-border);\n}\n\n\n\n.applications-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n overflow-y: auto;\n}\n\n.app-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-md);\n overflow: hidden;\n transition: box-shadow 0.2s ease;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-lg);\n}\n\n.app-card.inactive[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.app-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 16px 20px;\n gap: 12px;\n}\n\n.app-header-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex: 1;\n cursor: pointer;\n transition: background 0.2s ease;\n border-radius: 8px;\n padding: 4px;\n margin: -4px;\n}\n\n.app-header-main[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.app-edit-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.app-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.app-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: 10px;\n margin-right: 16px;\n flex-shrink: 0;\n}\n\n.app-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-text-inverse);\n}\n\n.app-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.app-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.app-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.app-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-left: 16px;\n}\n\n.scope-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.scope-count[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n}\n\n\n\n.app-details[_ngcontent-%COMP%] {\n padding: 0 20px 20px 20px;\n border-top: 1px solid var(--mj-border-default);\n margin-top: 0;\n}\n\n.details-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.details-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n}\n\n.scope-rules[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.scope-rule[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n padding: 10px 12px;\n background: var(--mj-bg-page);\n border-radius: 8px;\n}\n\n.rule-icon[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n margin-right: 12px;\n flex-shrink: 0;\n}\n\n.rule-icon.pattern-include[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-600);\n}\n\n.rule-icon.pattern-exclude[_ngcontent-%COMP%] {\n background: var(--mj-color-brand-100);\n color: var(--mj-brand-primary-hover);\n}\n\n.rule-icon.pattern-deny[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-color-error-600);\n}\n\n.rule-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.rule-scope[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.rule-pattern[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n flex-wrap: wrap;\n}\n\n.rule-pattern[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n background: var(--mj-bg-surface-active);\n padding: 2px 6px;\n border-radius: 4px;\n color: var(--mj-text-primary);\n}\n\n.pattern-type[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n.priority[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n}\n\n.empty-scopes[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 24px;\n color: var(--mj-text-secondary);\n text-align: center;\n background: var(--mj-bg-page);\n border-radius: 8px;\n}\n\n.empty-scopes[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n margin-bottom: 8px;\n opacity: 0.5;\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 100;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n width: 570px;\n height: 100%;\n max-height: 100%;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px var(--mj-bg-overlay);\n z-index: 101;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n transform: translateX(100%);\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.slideout-resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n width: 6px;\n height: 100%;\n cursor: ew-resize;\n background: transparent;\n z-index: 10;\n transition: background 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover, \n.slideout-resize-handle.resizing[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 2px;\n height: 40px;\n background: var(--mj-color-neutral-300);\n border-radius: 2px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.slideout-resize-handle[_ngcontent-%COMP%]:hover::after {\n opacity: 1;\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n flex: 1;\n min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n padding: 3px 10px;\n border-radius: 12px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n flex-shrink: 0;\n}\n\n.status-pill.active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n background: transparent;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.slideout-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active) .tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default); \n\n color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.scopes-panel[_ngcontent-%COMP%] {\n height: 100%;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 8px;\n letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n resize: vertical;\n min-height: 80px;\n}\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within {\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default); \n\n flex-shrink: 0;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button {\n min-width: 100px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-radius: 10px;\n border: 1px solid var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-color-neutral-300);\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n font-weight: 600;\n color: var(--mj-text-secondary);\n font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n line-height: 1.4;\n}\n\n\n\n\n\n\n\n\n\n.scopes-intro[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-status-info-bg);\n border: 1px solid var(--mj-status-info-border);\n border-radius: 10px;\n font-size: 13px;\n color: var(--mj-status-info-text);\n margin-bottom: 16px;\n line-height: 1.4;\n}\n\n.scopes-intro[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n font-size: 14px;\n flex-shrink: 0;\n margin-top: 1px;\n}\n\n.scope-categories-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.category-count-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.scope-category-card[_ngcontent-%COMP%] .category-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.category-chevron[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 11px;\n}\n\n.category-scopes-list[_ngcontent-%COMP%] {\n border-top: 1px solid var(--mj-border-default); \n\n padding: 8px;\n max-height: 280px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.scope-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n border-radius: 8px;\n background: var(--mj-bg-page);\n transition: all 0.2s ease;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.scope-row.selected[_ngcontent-%COMP%] {\n background: var(--mj-color-violet-100);\n border: 1px solid var(--mj-color-violet-300);\n}\n\n.scope-select[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n flex: 1;\n min-width: 0;\n cursor: pointer;\n}\n\n.scope-select[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.scope-path[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-family: 'SF Mono', 'Consolas', monospace;\n word-break: break-word;\n}\n\n.scope-description[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 2px;\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n\n.scope-pattern-display[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-left: auto;\n flex-shrink: 0;\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n.pattern-tag[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n font-family: 'SF Mono', 'Consolas', monospace;\n font-size: 11px;\n color: var(--mj-text-secondary);\n}\n\n.pattern-tag.include[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n}\n\n.pattern-tag.exclude[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n.pattern-tag[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.scope-pattern-config[_ngcontent-%COMP%] {\n display: none;\n gap: 6px;\n margin-left: auto;\n flex-shrink: 0;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover .scope-pattern-config[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%] .scope-pattern-config[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.scope-row[_ngcontent-%COMP%]:hover .scope-pattern-display[_ngcontent-%COMP%], \n.scope-row.editing[_ngcontent-%COMP%] .scope-pattern-display[_ngcontent-%COMP%] {\n display: none;\n}\n\n.pattern-field[_ngcontent-%COMP%] {\n width: 60px;\n}\n\n[_nghost-%COMP%] .pattern-field .k-input {\n padding: 3px 6px;\n font-size: 11px;\n border-radius: 4px;\n height: 26px;\n}\n\n.type-field[_ngcontent-%COMP%] {\n width: 75px;\n}\n\n[_nghost-%COMP%] .type-field .k-dropdownlist {\n font-size: 11px;\n height: 26px;\n}\n\n[_nghost-%COMP%] .type-field .k-input-inner {\n padding: 2px 6px;\n font-size: 11px;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 32px;\n color: var(--mj-text-muted);\n text-align: center;\n}\n\n.empty-scopes-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.5;\n}\n\n\n"] });
1049
1049
  }
1050
1050
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIApplicationsPanelComponent, [{
1051
1051
  type: Component,
package/dist/APIKeys/api-key-create-dialog.component.js CHANGED
@@ -4,9 +4,9 @@ import { GraphQLEncryptionClient } from '@memberjunction/graphql-dataprovider';
4
4
  import { APIKeysEngineBase, parseAPIScopeUIConfig } from '@memberjunction/api-keys-base';
5
5
  import * as i0 from "@angular/core";
6
6
  import * as i1 from "@angular/forms";
7
- import * as i2 from "@progress/kendo-angular-inputs";
8
- import * as i3 from "@progress/kendo-angular-dateinputs";
9
- import * as i4 from "@progress/kendo-angular-buttons";
7
+ import * as i2 from "@progress/kendo-angular-buttons";
8
+ import * as i3 from "@progress/kendo-angular-inputs";
9
+ import * as i4 from "@progress/kendo-angular-dateinputs";
10
10
  import * as i5 from "@memberjunction/ng-shared-generic";
11
11
  import * as i6 from "@angular/common";
12
12
  function APIKeyCreateDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -742,7 +742,7 @@ export class APIKeyCreateDialogComponent {
742
742
  i0.ɵɵconditional(ctx.Step === "scopes" ? 15 : -1);
743
743
  i0.ɵɵadvance();
744
744
  i0.ɵɵconditional(ctx.Step === "success" ? 16 : -1);
745
- } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TextBoxDirective, i2.TextAreaDirective, i2.CheckBoxDirective, i3.DatePickerComponent, i4.ButtonComponent, i5.LoadingComponent, i6.DatePipe], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 100;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n width: 520px;\n height: 100%;\n max-height: 100%;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px var(--mj-bg-overlay);\n z-index: 101;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateX(100%);\n overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n flex: 1;\n min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n}\n\n.step-panel[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button {\n min-width: 100px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: var(--mj-shadow-brand-md);\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button i {\n margin: 0 5px;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 24px;\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n border-bottom: 1px solid var(--mj-color-accent-300);\n}\n\n.step[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-color-neutral-300);\n border-radius: 50%;\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-secondary);\n transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.step.completed[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.step.active[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-color-brand-800);\n font-weight: 600;\n}\n\n.step-connector[_ngcontent-%COMP%] {\n width: 80px;\n height: 2px;\n background: var(--mj-color-neutral-300);\n margin: 0 16px;\n margin-bottom: 20px;\n transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, var(--mj-status-success), var(--mj-brand-primary));\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n padding: 24px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n.scopes-content[_ngcontent-%COMP%] {\n max-height: 450px;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin-bottom: 8px;\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 6px;\n}\n\n\n\n.expiration-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.preset-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.preset-btn[_ngcontent-%COMP%] {\n padding: 8px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.preset-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-color-brand-50);\n}\n\n.preset-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.custom-date[_ngcontent-%COMP%] {\n margin-top: 4px;\n}\n\n.expiration-preview[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n background: var(--mj-color-success-50);\n border-radius: 8px;\n font-size: 13px;\n color: var(--mj-color-success-600);\n}\n\n.expiration-preview[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n background: var(--mj-color-error-50);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 8px;\n color: var(--mj-color-error-600);\n font-size: 14px;\n}\n\n\n\n.scopes-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 20px;\n}\n\n.scopes-info[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 4px 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.scopes-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.scopes-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--mj-brand-primary);\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n}\n\n.scopes-count[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n font-weight: 700;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.category-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n}\n\n.category-badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n background: var(--mj-border-default);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.category-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.select-all-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.category-right[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n padding: 8px 16px 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n}\n\n.scope-item[_ngcontent-%COMP%] {\n padding: 10px 0;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n display: block;\n font-weight: 500;\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 2px;\n}\n\n.scope-tip[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: var(--mj-status-info-bg);\n border-radius: 8px;\n margin-top: 16px;\n font-size: 13px;\n color: var(--mj-status-info-text);\n}\n\n.scope-tip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n}\n\n.scope-tip[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n padding: 2px 6px;\n border-radius: 4px;\n font-family: monospace;\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n background: linear-gradient(135deg, var(--mj-color-error-50) 0%, var(--mj-color-error-100) 100%);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 10px;\n margin-top: 16px;\n font-size: 13px;\n color: var(--mj-status-error);\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-color-error-600);\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error);\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n line-height: 1.5;\n}\n\n\n\n.success-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.success-icon[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.success-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 64px;\n color: var(--mj-status-success);\n}\n\n.success-title[_ngcontent-%COMP%] {\n margin: 0 0 24px 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n\n\n.key-display[_ngcontent-%COMP%] {\n background: var(--mj-color-neutral-800);\n border-radius: 12px;\n padding: 20px;\n margin-bottom: 24px;\n}\n\n.key-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: 8px;\n margin-bottom: 16px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-color-accent-300);\n}\n\n.key-value[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n padding: 12px 16px;\n}\n\n.key-value[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n flex: 1;\n font-family: 'Fira Code', 'Consolas', monospace;\n font-size: 14px;\n color: var(--mj-status-success);\n word-break: break-all;\n text-align: left;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: var(--mj-color-neutral-600);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n cursor: pointer;\n transition: all 0.2s ease;\n white-space: nowrap;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-text-secondary);\n}\n\n.copy-btn.copied[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n.key-details[_ngcontent-%COMP%] {\n text-align: left;\n background: var(--mj-bg-page);\n border-radius: 10px;\n padding: 16px 20px;\n margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n\n.security-note[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n text-align: left;\n padding: 16px;\n background: linear-gradient(135deg, var(--mj-color-success-50) 0%, var(--mj-color-success-100) 100%);\n border-radius: 10px;\n font-size: 13px;\n color: var(--mj-color-success-800);\n}\n\n.security-note[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-status-success);\n margin-top: 2px;\n}\n\n.security-note[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 4px;\n}\n\n\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner, \n[_nghost-%COMP%] .k-datepicker .k-input {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within, \n[_nghost-%COMP%] .k-datepicker:focus-within {\n box-shadow: var(--mj-focus-ring);\n}"] });
745
+ } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.TextBoxDirective, i3.TextAreaDirective, i3.CheckBoxDirective, i4.DatePickerComponent, i5.LoadingComponent, i6.DatePipe], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 100;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n width: 520px;\n height: 100%;\n max-height: 100%;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px var(--mj-bg-overlay);\n z-index: 101;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateX(100%);\n overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n flex: 1;\n min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n}\n\n.step-panel[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button {\n min-width: 100px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: var(--mj-shadow-brand-md);\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button i {\n margin: 0 5px;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 24px;\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n border-bottom: 1px solid var(--mj-color-accent-300);\n}\n\n.step[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-color-neutral-300);\n border-radius: 50%;\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-secondary);\n transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.step.completed[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.step.active[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-color-brand-800);\n font-weight: 600;\n}\n\n.step-connector[_ngcontent-%COMP%] {\n width: 80px;\n height: 2px;\n background: var(--mj-color-neutral-300);\n margin: 0 16px;\n margin-bottom: 20px;\n transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, var(--mj-status-success), var(--mj-brand-primary));\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n padding: 24px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n.scopes-content[_ngcontent-%COMP%] {\n max-height: 450px;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin-bottom: 8px;\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 6px;\n}\n\n\n\n.expiration-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.preset-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.preset-btn[_ngcontent-%COMP%] {\n padding: 8px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.preset-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-color-brand-50);\n}\n\n.preset-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.custom-date[_ngcontent-%COMP%] {\n margin-top: 4px;\n}\n\n.expiration-preview[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n background: var(--mj-color-success-50);\n border-radius: 8px;\n font-size: 13px;\n color: var(--mj-color-success-600);\n}\n\n.expiration-preview[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n background: var(--mj-color-error-50);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 8px;\n color: var(--mj-color-error-600);\n font-size: 14px;\n}\n\n\n\n.scopes-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 20px;\n}\n\n.scopes-info[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 4px 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.scopes-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.scopes-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--mj-brand-primary);\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n}\n\n.scopes-count[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n font-weight: 700;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.category-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n}\n\n.category-badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n background: var(--mj-border-default);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.category-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.select-all-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n}\n\n.category-right[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n padding: 8px 16px 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n}\n\n.scope-item[_ngcontent-%COMP%] {\n padding: 10px 0;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n display: block;\n font-weight: 500;\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 2px;\n}\n\n.scope-tip[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: var(--mj-status-info-bg);\n border-radius: 8px;\n margin-top: 16px;\n font-size: 13px;\n color: var(--mj-status-info-text);\n}\n\n.scope-tip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n}\n\n.scope-tip[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: var(--mj-color-info-100);\n padding: 2px 6px;\n border-radius: 4px;\n font-family: monospace;\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n background: linear-gradient(135deg, var(--mj-color-error-50) 0%, var(--mj-color-error-100) 100%);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 10px;\n margin-top: 16px;\n font-size: 13px;\n color: var(--mj-status-error);\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-color-error-600);\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error);\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n line-height: 1.5;\n}\n\n\n\n.success-content[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.success-icon[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.success-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 64px;\n color: var(--mj-status-success);\n}\n\n.success-title[_ngcontent-%COMP%] {\n margin: 0 0 24px 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n\n\n.key-display[_ngcontent-%COMP%] {\n background: var(--mj-color-neutral-800);\n border-radius: 12px;\n padding: 20px;\n margin-bottom: 24px;\n}\n\n.key-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n border-radius: 8px;\n margin-bottom: 16px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-color-accent-300);\n}\n\n.key-value[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n padding: 12px 16px;\n}\n\n.key-value[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n flex: 1;\n font-family: 'Fira Code', 'Consolas', monospace;\n font-size: 14px;\n color: var(--mj-status-success);\n word-break: break-all;\n text-align: left;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: var(--mj-color-neutral-600);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n cursor: pointer;\n transition: all 0.2s ease;\n white-space: nowrap;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-text-secondary);\n}\n\n.copy-btn.copied[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n.key-details[_ngcontent-%COMP%] {\n text-align: left;\n background: var(--mj-bg-page);\n border-radius: 10px;\n padding: 16px 20px;\n margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n\n.security-note[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n text-align: left;\n padding: 16px;\n background: linear-gradient(135deg, var(--mj-color-success-50) 0%, var(--mj-color-success-100) 100%);\n border-radius: 10px;\n font-size: 13px;\n color: var(--mj-color-success-800);\n}\n\n.security-note[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-status-success);\n margin-top: 2px;\n}\n\n.security-note[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 4px;\n}\n\n\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner, \n[_nghost-%COMP%] .k-datepicker .k-input {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within, \n[_nghost-%COMP%] .k-datepicker:focus-within {\n box-shadow: var(--mj-focus-ring);\n}"] });
746
746
  }
747
747
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIKeyCreateDialogComponent, [{
748
748
  type: Component,
package/dist/APIKeys/api-key-edit-panel.component.js CHANGED
@@ -5,9 +5,9 @@ import { APIKeysEngineBase, parseAPIScopeUIConfig } from '@memberjunction/api-ke
5
5
  import * as i0 from "@angular/core";
6
6
  import * as i1 from "@angular/common";
7
7
  import * as i2 from "@angular/forms";
8
- import * as i3 from "@progress/kendo-angular-inputs";
9
- import * as i4 from "@progress/kendo-angular-dateinputs";
10
- import * as i5 from "@progress/kendo-angular-buttons";
8
+ import * as i3 from "@progress/kendo-angular-buttons";
9
+ import * as i4 from "@progress/kendo-angular-inputs";
10
+ import * as i5 from "@progress/kendo-angular-dateinputs";
11
11
  import * as i6 from "@memberjunction/ng-shared-generic";
12
12
  function APIKeyEditPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
13
13
  const _r1 = i0.ɵɵgetCurrentView();
@@ -1055,7 +1055,7 @@ export class APIKeyEditPanelComponent {
1055
1055
  i0.ɵɵconditional(ctx.IsLoading ? 11 : -1);
1056
1056
  i0.ɵɵadvance();
1057
1057
  i0.ɵɵconditional(!ctx.IsLoading && ctx.APIKey ? 12 : -1);
1058
- } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.TextBoxDirective, i3.TextAreaDirective, i3.CheckBoxDirective, i4.DatePickerComponent, i5.ButtonComponent, i6.LoadingComponent], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 100;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n width: 520px;\n height: 100%;\n max-height: 100%;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px var(--mj-bg-overlay);\n z-index: 101;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateX(100%);\n overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-brand-accent-subtle);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n flex: 1;\n min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.key-status[_ngcontent-%COMP%] {\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.key-status.active[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success-text);\n}\n\n.key-status.revoked[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface-hover);\n border: none;\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-primary);\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n background: transparent;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.slideout-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 9px;\n font-size: 10px;\n font-weight: 600;\n}\n\n.tab-badge.unsaved[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active) .tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n padding: 20px 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n padding: 16px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button {\n min-width: 80px;\n padding: 8px 16px;\n font-weight: 500;\n border-radius: 6px;\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px 16px;\n border-radius: 8px;\n font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success-text);\n}\n\n.message.error[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n\n\n\n\n\n.key-info-card[_ngcontent-%COMP%] {\n background: var(--mj-brand-accent-subtle);\n border-radius: 10px;\n padding: 14px 16px;\n margin-bottom: 16px;\n}\n\n.info-header[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n padding-bottom: 12px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.info-row[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.hash-value[_ngcontent-%COMP%] {\n font-family: 'Fira Code', 'Consolas', monospace;\n font-size: 13px;\n color: var(--mj-text-primary);\n word-break: break-all;\n background: var(--mj-bg-surface);\n padding: 8px 12px;\n border-radius: 6px;\n}\n\n.info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.info-value[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.info-value.never-used[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-style: italic;\n}\n\n\n\n.edit-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: 10px;\n padding: 16px;\n margin-bottom: 16px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 14px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.edit-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.edit-toggle[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.expiration-field[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n background: transparent;\n border: 1px dashed var(--mj-border-strong);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n margin-top: 14px;\n padding-top: 14px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 10px;\n padding: 14px 16px;\n}\n\n.danger-zone[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-status-error);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.revoke-section[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 20px;\n}\n\n.revoke-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex: 1;\n}\n\n.revoke-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-status-error);\n margin-top: 2px;\n}\n\n.revoke-info[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error-text);\n margin-bottom: 4px;\n}\n\n.revoke-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.revoke-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-status-error);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-status-error);\n cursor: pointer;\n transition: all 0.2s ease;\n white-space: nowrap;\n}\n\n.revoke-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n\n\n.revoke-confirm[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border-radius: 8px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-status-error);\n}\n\n.confirm-warning[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error-text);\n font-size: 16px;\n margin-bottom: 4px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.confirm-input[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.confirm-input[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-status-error-text);\n margin-bottom: 8px;\n}\n\n.confirm-input[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.confirm-input[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.confirm-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-status-error);\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-inverse);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-status-error-text);\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n\n.revoked-notice[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 20px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 12px;\n}\n\n.revoked-notice[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-text-secondary);\n}\n\n.revoked-notice[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.revoked-notice[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.scopes-tab[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.scopes-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.scope-count[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.category-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n}\n\n.category-count[_ngcontent-%COMP%] {\n padding: 2px 8px;\n background: var(--mj-border-default);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.category-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.category-all-toggle[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.category-all-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n padding: 8px 16px 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n}\n\n.scope-item[_ngcontent-%COMP%] {\n padding: 10px 0;\n border-bottom: 1px solid var(--mj-bg-surface-sunken); \n\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n display: block;\n font-weight: 500;\n font-size: 13px;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 2px;\n}\n\n\n\n.usage-tab[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.usage-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n background: var(--mj-brand-accent-subtle);\n border-radius: 12px;\n text-align: center;\n}\n\n.stat-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-brand-primary);\n margin-bottom: 12px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 24px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n margin-top: 4px;\n}\n\n\n\n.usage-logs[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.log-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr 80px 80px;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-border-default);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.log-item[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr 80px 80px;\n gap: 12px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 13px;\n align-items: center;\n}\n\n.log-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.col-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: monospace;\n color: var(--mj-text-primary);\n}\n\n.method-badge[_ngcontent-%COMP%] {\n padding: 2px 6px;\n background: var(--mj-status-info-bg);\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-color-info-600);\n}\n\n.col-status[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.col-status.status-warning[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.col-status.status-error[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.col-duration[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n font-size: 13px;\n}\n\n\n\n\n\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner, \n[_nghost-%COMP%] .k-datepicker .k-input {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within, \n[_nghost-%COMP%] .k-datepicker:focus-within {\n box-shadow: var(--mj-focus-ring);\n}\n\n\n\n[_nghost-%COMP%] .edit-actions .k-button {\n min-width: 120px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .edit-actions .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%] .edit-actions .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: var(--mj-shadow-brand-md);\n}\n\n\n\n[_nghost-%COMP%] .scopes-header .k-button {\n min-width: 120px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .scopes-header .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%] .scopes-header .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: var(--mj-shadow-brand-md);\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 10px;\n margin-bottom: 16px;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-status-error);\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error-text);\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n line-height: 1.5;\n}"] });
1058
+ } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.TextBoxDirective, i4.TextAreaDirective, i4.CheckBoxDirective, i5.DatePickerComponent, i6.LoadingComponent], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 100;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n width: 520px;\n height: 100%;\n max-height: 100%;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px var(--mj-bg-overlay);\n z-index: 101;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateX(100%);\n overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: var(--mj-brand-accent-subtle);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n flex: 1;\n min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.key-status[_ngcontent-%COMP%] {\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.key-status.active[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success-text);\n}\n\n.key-status.revoked[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface-hover);\n border: none;\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-active);\n color: var(--mj-text-primary);\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n background: transparent;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.slideout-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 9px;\n font-size: 10px;\n font-weight: 600;\n}\n\n.tab-badge.unsaved[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active) .tab-badge[_ngcontent-%COMP%] {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n padding: 20px 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n padding: 16px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n[_nghost-%COMP%] .slideout-footer .k-button {\n min-width: 80px;\n padding: 8px 16px;\n font-weight: 500;\n border-radius: 6px;\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px 16px;\n border-radius: 8px;\n font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n color: var(--mj-status-success-text);\n}\n\n.message.error[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n color: var(--mj-status-error);\n}\n\n\n\n\n\n\n.key-info-card[_ngcontent-%COMP%] {\n background: var(--mj-brand-accent-subtle);\n border-radius: 10px;\n padding: 14px 16px;\n margin-bottom: 16px;\n}\n\n.info-header[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n padding-bottom: 12px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.info-row[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.hash-value[_ngcontent-%COMP%] {\n font-family: 'Fira Code', 'Consolas', monospace;\n font-size: 13px;\n color: var(--mj-text-primary);\n word-break: break-all;\n background: var(--mj-bg-surface);\n padding: 8px 12px;\n border-radius: 6px;\n}\n\n.info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.info-value[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.info-value.never-used[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-style: italic;\n}\n\n\n\n.edit-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: 10px;\n padding: 16px;\n margin-bottom: 16px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 14px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.edit-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.edit-toggle[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.expiration-field[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n background: transparent;\n border: 1px dashed var(--mj-border-strong);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n margin-top: 14px;\n padding-top: 14px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 10px;\n padding: 14px 16px;\n}\n\n.danger-zone[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-status-error);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.revoke-section[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 20px;\n}\n\n.revoke-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex: 1;\n}\n\n.revoke-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-status-error);\n margin-top: 2px;\n}\n\n.revoke-info[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error-text);\n margin-bottom: 4px;\n}\n\n.revoke-info[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.revoke-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-status-error);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-status-error);\n cursor: pointer;\n transition: all 0.2s ease;\n white-space: nowrap;\n}\n\n.revoke-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n\n\n.revoke-confirm[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n border-radius: 8px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-status-error);\n}\n\n.confirm-warning[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error-text);\n font-size: 16px;\n margin-bottom: 4px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.confirm-input[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.confirm-input[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-status-error-text);\n margin-bottom: 8px;\n}\n\n.confirm-input[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: var(--mj-status-error-bg);\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.confirm-input[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.confirm-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-status-error);\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-inverse);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-status-error-text);\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n\n.revoked-notice[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 20px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 12px;\n}\n\n.revoked-notice[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-text-secondary);\n}\n\n.revoked-notice[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.revoked-notice[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.scopes-tab[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.scopes-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.scope-count[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.category-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 14px;\n color: var(--mj-text-primary);\n}\n\n.category-count[_ngcontent-%COMP%] {\n padding: 2px 8px;\n background: var(--mj-border-default);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.category-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.category-all-toggle[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.category-all-toggle[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n padding: 8px 16px 16px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n}\n\n.scope-item[_ngcontent-%COMP%] {\n padding: 10px 0;\n border-bottom: 1px solid var(--mj-bg-surface-sunken); \n\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n display: block;\n font-weight: 500;\n font-size: 13px;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 2px;\n}\n\n\n\n.usage-tab[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.usage-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n background: var(--mj-brand-accent-subtle);\n border-radius: 12px;\n text-align: center;\n}\n\n.stat-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-brand-primary);\n margin-bottom: 12px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 24px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-primary);\n margin-top: 4px;\n}\n\n\n\n.usage-logs[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.log-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr 80px 80px;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-border-default);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.log-item[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr 80px 80px;\n gap: 12px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 13px;\n align-items: center;\n}\n\n.log-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.col-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: monospace;\n color: var(--mj-text-primary);\n}\n\n.method-badge[_ngcontent-%COMP%] {\n padding: 2px 6px;\n background: var(--mj-status-info-bg);\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-color-info-600);\n}\n\n.col-status[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.col-status.status-warning[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.col-status.status-error[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.col-duration[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n font-size: 13px;\n}\n\n\n\n\n\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner, \n[_nghost-%COMP%] .k-datepicker .k-input {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within, \n[_nghost-%COMP%] .k-datepicker:focus-within {\n box-shadow: var(--mj-focus-ring);\n}\n\n\n\n[_nghost-%COMP%] .edit-actions .k-button {\n min-width: 120px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .edit-actions .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%] .edit-actions .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: var(--mj-shadow-brand-md);\n}\n\n\n\n[_nghost-%COMP%] .scopes-header .k-button {\n min-width: 120px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .scopes-header .k-button-solid-primary {\n background: var(--mj-brand-primary);\n border: none;\n box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%] .scopes-header .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: var(--mj-shadow-brand-md);\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 10px;\n margin-bottom: 16px;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-status-error);\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n display: block;\n color: var(--mj-status-error-text);\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n line-height: 1.5;\n}"] });
1059
1059
  }
1060
1060
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIKeyEditPanelComponent, [{
1061
1061
  type: Component,
package/dist/APIKeys/api-scopes-panel.component.js CHANGED
@@ -4,10 +4,10 @@ import { UUIDsEqual } from '@memberjunction/global';
4
4
  import * as i0 from "@angular/core";
5
5
  import * as i1 from "@angular/common";
6
6
  import * as i2 from "@angular/forms";
7
- import * as i3 from "@progress/kendo-angular-dropdowns";
8
- import * as i4 from "@progress/kendo-angular-inputs";
9
- import * as i5 from "@progress/kendo-angular-dialog";
10
- import * as i6 from "@progress/kendo-angular-buttons";
7
+ import * as i3 from "@progress/kendo-angular-buttons";
8
+ import * as i4 from "@progress/kendo-angular-dropdowns";
9
+ import * as i5 from "@progress/kendo-angular-inputs";
10
+ import * as i6 from "@progress/kendo-angular-dialog";
11
11
  import * as i7 from "@memberjunction/ng-shared-generic";
12
12
  const _c0 = a0 => ({ node: a0 });
13
13
  const _c1 = () => ({ FullPath: "(No Parent - Root Level)", ID: null });
@@ -637,7 +637,7 @@ export class APIScopesPanelComponent {
637
637
  i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
638
638
  i0.ɵɵadvance();
639
639
  i0.ɵɵconditional(ctx.ShowCreateDialog || ctx.ShowEditDialog ? 3 : -1);
640
- } }, dependencies: [i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextBoxDirective, i4.TextAreaDirective, i4.CheckBoxDirective, i5.WindowComponent, i5.WindowTitleBarComponent, i6.ButtonComponent, i7.LoadingComponent], styles: [".scopes-panel[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 24px;\n flex-wrap: wrap;\n gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.scope-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n}\n\n.stat[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.stat.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.stat[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tree-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.btn-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.btn-create[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-weight: 600;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n margin-bottom: 16px;\n font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success-border);\n}\n\n.message.error[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error-border);\n}\n\n\n\n.scope-tree[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-md);\n}\n\n.scope-node[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.scope-node[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.node-content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n transition: background 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.node-content.inactive[_ngcontent-%COMP%] {\n opacity: 0.6;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n width: 24px;\n flex-shrink: 0;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n cursor: pointer;\n}\n\n.scope-icon[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n margin-right: 12px;\n flex-shrink: 0;\n}\n\n.scope-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-inverse);\n}\n\n.scope-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n flex-wrap: wrap;\n}\n\n.full-path[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 500;\n padding: 2px 6px;\n border-radius: 4px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.scope-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 4px;\n font-size: 12px;\n flex-wrap: wrap;\n}\n\n.category[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.resource-type[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.description[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 300px;\n}\n\n.node-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-left: 12px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover .node-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.btn-node-action[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-node-action[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.btn-node-action[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.children[_ngcontent-%COMP%] {\n margin-left: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] kendo-window {\n border-radius: 16px !important;\n overflow: hidden;\n box-shadow: var(--mj-shadow-2xl) !important;\n background: var(--mj-bg-surface) !important;\n}\n\n[_nghost-%COMP%] kendo-window .k-window-content {\n padding: 0 !important;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--mj-bg-surface) !important;\n}\n\n[_nghost-%COMP%] kendo-window-titlebar {\n display: flex !important;\n align-items: center;\n justify-content: space-between;\n padding: 18px 24px !important;\n background: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !important;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n}\n\n.dialog-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-size: 18px;\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: var(--mj-text-muted);\n transition: all 0.2s ease;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-hover);\n}\n\n.window-close-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n padding: 24px;\n flex: 1;\n overflow-y: auto;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 8px;\n letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n resize: vertical;\n min-height: 80px;\n}\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner, \n[_nghost-%COMP%] .form-field .k-dropdownlist {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface) !important;\n color: var(--mj-text-primary) !important;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within, \n[_nghost-%COMP%] .form-field .k-dropdownlist.k-focus {\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n.field-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 6px;\n line-height: 1.4;\n}\n\n.form-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n}\n\n.form-field.half[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-radius: 10px;\n border: 1px solid var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n line-height: 1.4;\n}\n\n\n\n.dialog-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 20px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n margin: 0 -24px -24px -24px;\n}\n\n[_nghost-%COMP%] .dialog-actions .k-button {\n min-width: 100px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .dialog-actions .k-button-solid-primary {\n background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n border: none;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n[_nghost-%COMP%] .dialog-actions .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}"] });
640
+ } }, dependencies: [i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.DropDownListComponent, i5.TextBoxDirective, i5.TextAreaDirective, i5.CheckBoxDirective, i6.WindowComponent, i6.WindowTitleBarComponent, i7.LoadingComponent], styles: [".scopes-panel[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 24px;\n flex-wrap: wrap;\n gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.scope-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n}\n\n.stat[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.stat.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.stat[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.tree-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.btn-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.btn-create[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-weight: 600;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n margin-bottom: 16px;\n font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success-border);\n}\n\n.message.error[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error-border);\n}\n\n\n\n.scope-tree[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-md);\n}\n\n.scope-node[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.scope-node[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.node-content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n transition: background 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.node-content.inactive[_ngcontent-%COMP%] {\n opacity: 0.6;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n width: 24px;\n flex-shrink: 0;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n cursor: pointer;\n}\n\n.scope-icon[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n margin-right: 12px;\n flex-shrink: 0;\n}\n\n.scope-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-inverse);\n}\n\n.scope-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n flex-wrap: wrap;\n}\n\n.full-path[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 500;\n padding: 2px 6px;\n border-radius: 4px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.scope-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 4px;\n font-size: 12px;\n flex-wrap: wrap;\n}\n\n.category[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.resource-type[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.description[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 300px;\n}\n\n.node-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-left: 12px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover .node-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.btn-node-action[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-node-action[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.btn-node-action[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.children[_ngcontent-%COMP%] {\n margin-left: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px;\n color: var(--mj-text-secondary);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] kendo-window {\n border-radius: 16px !important;\n overflow: hidden;\n box-shadow: var(--mj-shadow-2xl) !important;\n background: var(--mj-bg-surface) !important;\n}\n\n[_nghost-%COMP%] kendo-window .k-window-content {\n padding: 0 !important;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--mj-bg-surface) !important;\n}\n\n[_nghost-%COMP%] kendo-window-titlebar {\n display: flex !important;\n align-items: center;\n justify-content: space-between;\n padding: 18px 24px !important;\n background: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !important;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 600;\n font-size: 17px;\n color: var(--mj-text-primary);\n}\n\n.dialog-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-size: 18px;\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: var(--mj-text-muted);\n transition: all 0.2s ease;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-hover);\n}\n\n.window-close-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n padding: 24px;\n flex: 1;\n overflow-y: auto;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 8px;\n letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n resize: vertical;\n min-height: 80px;\n}\n\n[_nghost-%COMP%] .form-input .k-input, \n[_nghost-%COMP%] .form-textarea .k-input-inner, \n[_nghost-%COMP%] .form-field .k-dropdownlist {\n padding: 10px 14px;\n border-radius: 8px;\n font-size: 14px;\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface) !important;\n color: var(--mj-text-primary) !important;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .form-input:focus-within, \n[_nghost-%COMP%] .form-textarea:focus-within, \n[_nghost-%COMP%] .form-field .k-dropdownlist.k-focus {\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n.field-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 6px;\n line-height: 1.4;\n}\n\n.form-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n}\n\n.form-field.half[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-radius: 10px;\n border: 1px solid var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n line-height: 1.4;\n}\n\n\n\n.dialog-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 20px 24px;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n margin: 0 -24px -24px -24px;\n}\n\n[_nghost-%COMP%] .dialog-actions .k-button {\n min-width: 100px;\n padding: 10px 20px;\n font-weight: 600;\n border-radius: 8px;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .dialog-actions .k-button-solid-primary {\n background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n border: none;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n[_nghost-%COMP%] .dialog-actions .k-button-solid-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}"] });
641
641
  }
642
642
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIScopesPanelComponent, [{
643
643
  type: Component,