@memberjunction/ng-dashboards 5.34.0 → 5.35.0

package/dist/AI/components/models/model-management.component.js

@@ -15,192 +15,38 @@ import { RegisterClass, UUIDsEqual, MJGlobal, MJEventType } from '@memberjunctio
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/forms";
-import * as i3 from "angular-split";
-import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-ui-components";
 import * as i5 from "@angular/common";
 import * as i6 from "../../../shared/pipes/highlight-search.pipe";
-const _forTrack0 = ($index, $item) => $item.value;
-const _forTrack1 = ($index, $item) => $item.ID;
+const _forTrack0 = ($index, $item) => $item.ID;
 function ModelManagementComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "mj-loading", 2);
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵelement(1, "mj-loading", 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("text", ctx_r0.currentLoadingMessage);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Hide Filters ");
-} }
-function ModelManagementComponent_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Show Filters ");
-} }
-function ModelManagementComponent_Conditional_2_Conditional_21_For_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const option_r4 = ctx.$implicit;
-    i0.ɵɵproperty("value", option_r4.value);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(option_r4.label);
-} }
-function ModelManagementComponent_Conditional_2_Conditional_21_For_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const vendor_r5 = ctx.$implicit;
-    i0.ɵɵproperty("value", vendor_r5.ID);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(vendor_r5.Name);
-} }
-function ModelManagementComponent_Conditional_2_Conditional_21_For_42_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const type_r6 = ctx.$implicit;
-    i0.ɵɵproperty("value", type_r6.ID);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(type_r6.Name);
-} }
-function ModelManagementComponent_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function ModelManagementComponent_Conditional_2_Conditional_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "as-split-area", 19)(1, "div", 24)(2, "div", 25)(3, "h3");
-    i0.ɵɵtext(4, "Model Filters");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 26)(6, "span", 27);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 28);
-    i0.ɵɵtext(9);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "button", 29);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_21_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFilterPanel()); });
-    i0.ɵɵelement(11, "span", 30);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 31)(13, "div", 32)(14, "label", 33);
-    i0.ɵɵelement(15, "span", 34);
-    i0.ɵɵtext(16, " Name ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "input", 35);
-    i0.ɵɵlistener("input", function ModelManagementComponent_Conditional_2_Conditional_21_Template_input_input_17_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onSearchChange($event.target.value)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 32)(19, "label", 33);
-    i0.ɵɵelement(20, "span", 36);
-    i0.ɵɵtext(21, " Sort By ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "select", 37);
-    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Conditional_21_Template_select_change_22_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onSortChange($event.target.value)); });
-    i0.ɵɵrepeaterCreate(23, ModelManagementComponent_Conditional_2_Conditional_21_For_24_Template, 2, 2, "option", 38, _forTrack0);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 32)(26, "label", 33);
-    i0.ɵɵelement(27, "span", 39);
-    i0.ɵɵtext(28, " Vendor ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "select", 37);
-    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Conditional_21_Template_select_change_29_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onVendorChange($event.target.value)); });
-    i0.ɵɵelementStart(30, "option", 40);
-    i0.ɵɵtext(31, "All Vendors");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(32, ModelManagementComponent_Conditional_2_Conditional_21_For_33_Template, 2, 2, "option", 38, _forTrack1);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(34, "div", 32)(35, "label", 33);
-    i0.ɵɵelement(36, "span", 6);
-    i0.ɵɵtext(37, " Type ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "select", 37);
-    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Conditional_21_Template_select_change_38_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onTypeChange($event.target.value)); });
-    i0.ɵɵelementStart(39, "option", 40);
-    i0.ɵɵtext(40, "All Types");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(41, ModelManagementComponent_Conditional_2_Conditional_21_For_42_Template, 2, 2, "option", 38, _forTrack1);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 32)(44, "label", 33);
-    i0.ɵɵelement(45, "span", 41);
-    i0.ɵɵtext(46, " Status ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "select", 37);
-    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Conditional_21_Template_select_change_47_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onStatusChange($event.target.value)); });
-    i0.ɵɵelementStart(48, "option", 40);
-    i0.ɵɵtext(49, "All Statuses");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "option", 42);
-    i0.ɵɵtext(51, "Active");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "option", 43);
-    i0.ɵɵtext(53, "Inactive");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(54, "div", 32)(55, "label", 33);
-    i0.ɵɵelement(56, "span", 44);
-    i0.ɵɵtext(57, " Power Rank ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "div", 45)(59, "input", 46);
-    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_2_Conditional_21_Template_input_ngModelChange_59_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.powerRankRange.min, $event) || (ctx_r0.powerRankRange.min = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Conditional_21_Template_input_change_59_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.validateAndApplyRankFilters("power")); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "span", 47);
-    i0.ɵɵtext(61, "-");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "input", 48);
-    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_2_Conditional_21_Template_input_ngModelChange_62_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.powerRankRange.max, $event) || (ctx_r0.powerRankRange.max = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Conditional_21_Template_input_change_62_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.validateAndApplyRankFilters("power")); });
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(63, "div", 49)(64, "button", 50);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_21_Template_button_click_64_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.clearFilters()); });
-    i0.ɵɵelement(65, "span", 51);
-    i0.ɵɵtext(66, " Reset Filters ");
-    i0.ɵɵelementEnd()()()()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("size", 20)("minSize", 15)("maxSize", 25);
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(ctx_r0.filteredModels.length);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("of ", ctx_r0.models.length);
-    i0.ɵɵadvance(8);
-    i0.ɵɵproperty("value", ctx_r0.searchTerm);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", ctx_r0.sortBy);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.sortOptions);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("value", ctx_r0.selectedVendor);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.vendors);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("value", ctx_r0.selectedType);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.modelTypes);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("value", ctx_r0.selectedStatus);
-    i0.ɵɵadvance(12);
-    i0.ɵɵproperty("max", ctx_r0.maxPowerRank);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.powerRankRange.min);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("max", ctx_r0.maxPowerRank);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.powerRankRange.max);
-} }
-function ModelManagementComponent_Conditional_2_Conditional_24_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_24_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.createNewModel()); });
-    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_19_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.createNewModel()); });
+    i0.ɵɵelement(1, "i", 15);
     i0.ɵɵtext(2, " Create First Model ");
     i0.ɵɵelementEnd();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵelement(1, "i", 52);
+function ModelManagementComponent_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "i", 22);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No models found");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ModelManagementComponent_Conditional_2_Conditional_24_Conditional_6_Template, 3, 0, "button", 53);
+    i0.ɵɵconditionalCreate(6, ModelManagementComponent_Conditional_2_Conditional_19_Conditional_6_Template, 3, 0, "button", 23);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -209,187 +55,187 @@ function ModelManagementComponent_Conditional_2_Conditional_24_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.hasActiveFilters ? 6 : -1);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 65);
-    i0.ɵɵelement(1, "i", 39);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 35);
+    i0.ɵɵelement(1, "i", 46);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const model_r9 = i0.ɵɵnextContext().$implicit;
+    const model_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", model_r9.Vendor, " ");
+    i0.ɵɵtextInterpolate1(" ", model_r5.Vendor, " ");
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 65);
-    i0.ɵɵelement(1, "i", 6);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 35);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const model_r9 = i0.ɵɵnextContext().$implicit;
+    const model_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", model_r9.AIModelType, " ");
+    i0.ɵɵtextInterpolate1(" ", model_r5.AIModelType, " ");
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 66);
-    i0.ɵɵelement(1, "i", 76);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 36);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Active ");
     i0.ɵɵelementEnd();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 67);
-    i0.ɵɵelement(1, "i", 76);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Inactive ");
     i0.ɵɵelementEnd();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p", 70);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p", 40);
     i0.ɵɵpipe(1, "highlightSearch");
 } if (rf & 2) {
-    const model_r9 = i0.ɵɵnextContext().$implicit;
+    const model_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, model_r9.Description, ctx_r0.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(1, 1, model_r5.Description, ctx_r0.searchTerm), i0.ɵɵsanitizeHtml);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 71);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 41);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "span", 51);
     i0.ɵɵtext(2, "Token Limit");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 80);
+    i0.ɵɵelementStart(3, "span", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const model_r9 = i0.ɵɵnextContext(2).$implicit;
+    const model_r5 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.formatTokenLimit(model_r9.InputTokenLimit));
+    i0.ɵɵtextInterpolate(ctx_r0.formatTokenLimit(model_r5.InputTokenLimit));
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "span", 51);
     i0.ɵɵtext(2, "API Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 80);
+    i0.ɵɵelementStart(3, "span", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const model_r9 = i0.ɵɵnextContext(2).$implicit;
+    const model_r5 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(model_r9.APIName);
+    i0.ɵɵtextInterpolate(model_r5.APIName);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "span", 51);
     i0.ɵɵtext(2, "Driver");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 80);
+    i0.ɵɵelementStart(3, "span", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const model_r9 = i0.ɵɵnextContext(2).$implicit;
+    const model_r5 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(model_r9.DriverClass);
+    i0.ɵɵtextInterpolate(model_r5.DriverClass);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72)(1, "div", 77)(2, "div", 78)(3, "span", 79);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42)(1, "div", 49)(2, "div", 50)(3, "span", 51);
     i0.ɵɵtext(4, "Power Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 80);
+    i0.ɵɵelementStart(5, "span", 52);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 78)(8, "span", 79);
+    i0.ɵɵelementStart(7, "div", 50)(8, "span", 51);
     i0.ɵɵtext(9, "Speed Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 80);
+    i0.ɵɵelementStart(10, "span", 52);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 78)(13, "span", 79);
+    i0.ɵɵelementStart(12, "div", 50)(13, "span", 51);
     i0.ɵɵtext(14, "Cost Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 80);
+    i0.ɵɵelementStart(15, "span", 52);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Conditional_17_Template, 5, 1, "div", 78);
-    i0.ɵɵconditionalCreate(18, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Conditional_18_Template, 5, 1, "div", 78);
-    i0.ɵɵconditionalCreate(19, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Conditional_19_Template, 5, 1, "div", 78);
+    i0.ɵɵconditionalCreate(17, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Conditional_17_Template, 5, 1, "div", 50);
+    i0.ɵɵconditionalCreate(18, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Conditional_18_Template, 5, 1, "div", 50);
+    i0.ɵɵconditionalCreate(19, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Conditional_19_Template, 5, 1, "div", 50);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const model_r9 = i0.ɵɵnextContext().$implicit;
+    const model_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.formatRank(model_r9.PowerRank, "power"));
+    i0.ɵɵtextInterpolate(ctx_r0.formatRank(model_r5.PowerRank, "power"));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.formatRank(model_r9.SpeedRank, "speed"));
+    i0.ɵɵtextInterpolate(ctx_r0.formatRank(model_r5.SpeedRank, "speed"));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.formatRank(model_r9.CostRank, "cost"));
+    i0.ɵɵtextInterpolate(ctx_r0.formatRank(model_r5.CostRank, "cost"));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(model_r9.InputTokenLimit ? 17 : -1);
+    i0.ɵɵconditional(model_r5.InputTokenLimit ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(model_r9.APIName ? 18 : -1);
+    i0.ɵɵconditional(model_r5.APIName ? 18 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(model_r9.DriverClass ? 19 : -1);
+    i0.ɵɵconditional(model_r5.DriverClass ? 19 : -1);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Template_div_click_1_listener() { const model_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleModelExpansion(model_r9.ID)); });
-    i0.ɵɵelementStart(2, "div", 60)(3, "div", 61);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Template_div_click_1_listener() { const model_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleModelExpansion(model_r5.ID)); });
+    i0.ɵɵelementStart(2, "div", 30)(3, "div", 31);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 62);
-    i0.ɵɵelement(6, "h4", 63);
+    i0.ɵɵelementStart(5, "div", 32);
+    i0.ɵɵelement(6, "h4", 33);
     i0.ɵɵpipe(7, "highlightSearch");
-    i0.ɵɵelementStart(8, "div", 64);
-    i0.ɵɵconditionalCreate(9, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_9_Template, 3, 1, "span", 65);
-    i0.ɵɵconditionalCreate(10, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_10_Template, 3, 1, "span", 65);
-    i0.ɵɵconditionalCreate(11, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_11_Template, 3, 0, "span", 66)(12, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_12_Template, 3, 0, "span", 67);
+    i0.ɵɵelementStart(8, "div", 34);
+    i0.ɵɵconditionalCreate(9, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_9_Template, 3, 1, "span", 35);
+    i0.ɵɵconditionalCreate(10, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_10_Template, 3, 1, "span", 35);
+    i0.ɵɵconditionalCreate(11, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_11_Template, 3, 0, "span", 36)(12, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_12_Template, 3, 0, "span", 37);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(13, "i", 68);
+    i0.ɵɵelement(13, "i", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 69);
-    i0.ɵɵconditionalCreate(15, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_15_Template, 2, 4, "p", 70)(16, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_16_Template, 2, 0, "p", 71);
-    i0.ɵɵconditionalCreate(17, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Conditional_17_Template, 20, 6, "div", 72);
+    i0.ɵɵelementStart(14, "div", 39);
+    i0.ɵɵconditionalCreate(15, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_15_Template, 2, 4, "p", 40)(16, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_16_Template, 2, 0, "p", 41);
+    i0.ɵɵconditionalCreate(17, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Conditional_17_Template, 20, 6, "div", 42);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 73)(19, "button", 74);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Template_button_click_19_listener($event) { const model_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showModelDetails(model_r9, $event)); });
-    i0.ɵɵelement(20, "i", 75);
+    i0.ɵɵelementStart(18, "div", 43)(19, "button", 44);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Template_button_click_19_listener($event) { const model_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showModelDetails(model_r5, $event)); });
+    i0.ɵɵelement(20, "i", 45);
     i0.ɵɵtext(21, " Details ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const model_r9 = ctx.$implicit;
+    const model_r5 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("expanded", ctx_r0.expandedModelId === model_r9.ID);
+    i0.ɵɵclassProp("expanded", ctx_r0.expandedModelId === model_r5.ID);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r0.getModelIcon(model_r9));
+    i0.ɵɵclassMap(ctx_r0.getModelIcon(model_r5));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(7, 12, model_r9.Name || "Unnamed Model", ctx_r0.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(7, 12, model_r5.Name || "Unnamed Model", ctx_r0.searchTerm), i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(model_r9.Vendor ? 9 : -1);
+    i0.ɵɵconditional(model_r5.Vendor ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(model_r9.AIModelType ? 10 : -1);
+    i0.ɵɵconditional(model_r5.AIModelType ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(model_r9.IsActive ? 11 : 12);
+    i0.ɵɵconditional(model_r5.IsActive ? 11 : 12);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("rotated", ctx_r0.expandedModelId === model_r9.ID);
+    i0.ɵɵclassProp("rotated", ctx_r0.expandedModelId === model_r5.ID);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(model_r9.Description ? 15 : 16);
+    i0.ɵɵconditional(model_r5.Description ? 15 : 16);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.expandedModelId === model_r9.ID ? 17 : -1);
+    i0.ɵɵconditional(ctx_r0.expandedModelId === model_r5.ID ? 17 : -1);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55);
-    i0.ɵɵrepeaterCreate(1, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_For_2_Template, 22, 15, "div", 57, _forTrack1);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵrepeaterCreate(1, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_For_2_Template, 22, 15, "div", 27, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.filteredModels);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_For_34_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 85);
-    i0.ɵɵelement(3, "i")(4, "span", 86);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_For_34_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 57);
+    i0.ɵɵelement(3, "i")(4, "span", 58);
     i0.ɵɵpipe(5, "highlightSearch");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "td");
@@ -398,87 +244,87 @@ function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_For_34_Tem
     i0.ɵɵelementStart(8, "td");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "td")(11, "span", 87);
+    i0.ɵɵelementStart(10, "td")(11, "span", 59);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "td")(14, "span", 87);
+    i0.ɵɵelementStart(13, "td")(14, "span", 59);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "td")(17, "span", 87);
+    i0.ɵɵelementStart(16, "td")(17, "span", 59);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "td")(20, "span", 88);
+    i0.ɵɵelementStart(19, "td")(20, "span", 60);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "td")(23, "button", 89);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_For_34_Template_button_click_23_listener() { const model_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showModelDetails(model_r12)); });
-    i0.ɵɵelement(24, "i", 75);
+    i0.ɵɵelementStart(22, "td")(23, "button", 61);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_For_34_Template_button_click_23_listener() { const model_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.showModelDetails(model_r8)); });
+    i0.ɵɵelement(24, "i", 45);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const model_r12 = ctx.$implicit;
+    const model_r8 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r0.getModelIcon(model_r12));
+    i0.ɵɵclassMap(ctx_r0.getModelIcon(model_r8));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(5, 19, model_r12.Name || "Unnamed Model", ctx_r0.searchTerm), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(5, 19, model_r8.Name || "Unnamed Model", ctx_r0.searchTerm), i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(model_r12.Vendor || "-");
+    i0.ɵɵtextInterpolate(model_r8.Vendor || "-");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(model_r12.AIModelType);
+    i0.ɵɵtextInterpolate(model_r8.AIModelType);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r0.getRankClass(model_r12.PowerRank, "power"));
+    i0.ɵɵclassMap(ctx_r0.getRankClass(model_r8.PowerRank, "power"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatRank(model_r12.PowerRank, "power"), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatRank(model_r8.PowerRank, "power"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r0.getRankClass(model_r12.SpeedRank, "speed"));
+    i0.ɵɵclassMap(ctx_r0.getRankClass(model_r8.SpeedRank, "speed"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatRank(model_r12.SpeedRank, "speed"), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatRank(model_r8.SpeedRank, "speed"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r0.getRankClass(model_r12.CostRank, "cost"));
+    i0.ɵɵclassMap(ctx_r0.getRankClass(model_r8.CostRank, "cost"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatRank(model_r12.CostRank, "cost"), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatRank(model_r8.CostRank, "cost"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", model_r12.IsActive)("inactive", !model_r12.IsActive);
+    i0.ɵɵclassProp("active", model_r8.IsActive)("inactive", !model_r8.IsActive);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", model_r12.IsActive ? "Active" : "Inactive", " ");
+    i0.ɵɵtextInterpolate1(" ", model_r8.IsActive ? "Active" : "Inactive", " ");
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 56)(1, "table", 81)(2, "thead")(3, "tr")(4, "th", 82);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("name")); });
-    i0.ɵɵelementStart(5, "span", 83);
+function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 26)(1, "table", 53)(2, "thead")(3, "tr")(4, "th", 54);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("name")); });
+    i0.ɵɵelementStart(5, "span", 55);
     i0.ɵɵtext(6, " Name ");
-    i0.ɵɵelement(7, "i", 84);
+    i0.ɵɵelement(7, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "th", 82);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template_th_click_8_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("vendor")); });
-    i0.ɵɵelementStart(9, "span", 83);
+    i0.ɵɵelementStart(8, "th", 54);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template_th_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("vendor")); });
+    i0.ɵɵelementStart(9, "span", 55);
     i0.ɵɵtext(10, " Vendor ");
-    i0.ɵɵelement(11, "i", 84);
+    i0.ɵɵelement(11, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "th", 82);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("type")); });
-    i0.ɵɵelementStart(13, "span", 83);
+    i0.ɵɵelementStart(12, "th", 54);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("type")); });
+    i0.ɵɵelementStart(13, "span", 55);
     i0.ɵɵtext(14, " Type ");
-    i0.ɵɵelement(15, "i", 84);
+    i0.ɵɵelement(15, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "th", 82);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("powerRank")); });
-    i0.ɵɵelementStart(17, "span", 83);
+    i0.ɵɵelementStart(16, "th", 54);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("powerRank")); });
+    i0.ɵɵelementStart(17, "span", 55);
     i0.ɵɵtext(18, " Power ");
-    i0.ɵɵelement(19, "i", 84);
+    i0.ɵɵelement(19, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "th", 82);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template_th_click_20_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("speedRank")); });
-    i0.ɵɵelementStart(21, "span", 83);
+    i0.ɵɵelementStart(20, "th", 54);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template_th_click_20_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("speedRank")); });
+    i0.ɵɵelementStart(21, "span", 55);
     i0.ɵɵtext(22, " Speed ");
-    i0.ɵɵelement(23, "i", 84);
+    i0.ɵɵelement(23, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "th", 82);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template_th_click_24_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("costRank")); });
-    i0.ɵɵelementStart(25, "span", 83);
+    i0.ɵɵelementStart(24, "th", 54);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template_th_click_24_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSortChange("costRank")); });
+    i0.ɵɵelementStart(25, "span", 55);
     i0.ɵɵtext(26, " Cost ");
-    i0.ɵɵelement(27, "i", 84);
+    i0.ɵɵelement(27, "i", 56);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(28, "th");
     i0.ɵɵtext(29, "Status");
@@ -487,7 +333,7 @@ function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template(r
     i0.ɵɵtext(31, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(32, "tbody");
-    i0.ɵɵrepeaterCreate(33, ModelManagementComponent_Conditional_2_Conditional_25_Case_1_For_34_Template, 25, 22, "tr", null, _forTrack1);
+    i0.ɵɵrepeaterCreate(33, ModelManagementComponent_Conditional_2_Conditional_20_Case_1_For_34_Template, 25, 22, "tr", null, _forTrack0);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -506,34 +352,34 @@ function ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template(r
     i0.ɵɵadvance(9);
     i0.ɵɵrepeater(ctx_r0.filteredModels);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ModelManagementComponent_Conditional_2_Conditional_25_Case_0_Template, 3, 0, "div", 55)(1, ModelManagementComponent_Conditional_2_Conditional_25_Case_1_Template, 35, 24, "div", 56);
+function ModelManagementComponent_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ModelManagementComponent_Conditional_2_Conditional_20_Case_0_Template, 3, 0, "div", 25)(1, ModelManagementComponent_Conditional_2_Conditional_20_Case_1_Template, 35, 24, "div", 26);
 } if (rf & 2) {
     let tmp_2_0;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional((tmp_2_0 = ctx_r0.viewMode) === "grid" ? 0 : tmp_2_0 === "list" ? 1 : -1);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
+function ModelManagementComponent_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
     i0.ɵɵelementEnd();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 100);
-    i0.ɵɵelement(1, "i", 76);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 73);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Active ");
     i0.ɵɵelementEnd();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 101);
-    i0.ɵɵelement(1, "i", 76);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Inactive ");
     i0.ɵɵelementEnd();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 102);
-    i0.ɵɵelement(1, "i", 6);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -541,12 +387,12 @@ function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_16_Te
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.selectedModel.AIModelType, " ");
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 98)(1, "h4", 103);
-    i0.ɵɵelement(2, "i", 115);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71)(1, "h4", 76);
+    i0.ɵɵelement(2, "i", 88);
     i0.ɵɵtext(3, " Description ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 116);
+    i0.ɵɵelementStart(4, "p", 89);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -554,11 +400,11 @@ function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_17_Te
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r0.selectedModel.Description);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_53_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106)(1, "span", 107);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
     i0.ɵɵtext(2, "API Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 110);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -566,11 +412,11 @@ function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_53_Te
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.selectedModel.APIName);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_54_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106)(1, "span", 107);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_54_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
     i0.ɵɵtext(2, "Input Token Limit");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 110);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -578,11 +424,11 @@ function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_54_Te
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.formatTokenLimit(ctx_r0.selectedModel.InputTokenLimit));
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106)(1, "span", 107);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
     i0.ɵɵtext(2, "Response Formats");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 110);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -590,19 +436,19 @@ function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_55_Te
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.selectedModel.SupportedResponseFormats);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106)(1, "span", 107);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
     i0.ɵɵtext(2, "Supports Effort Level");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 110);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4, "Yes");
     i0.ɵɵelementEnd()();
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_57_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106)(1, "span", 107);
+function ModelManagementComponent_Conditional_2_Conditional_23_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
     i0.ɵɵtext(2, "Driver Class");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 110);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -610,91 +456,91 @@ function ModelManagementComponent_Conditional_2_Conditional_28_Conditional_57_Te
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.selectedModel.DriverClass);
 } }
-function ModelManagementComponent_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 91)(1, "div", 92)(2, "div", 93);
+function ModelManagementComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64)(2, "div", 65);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 94)(5, "h3");
+    i0.ɵɵelementStart(4, "div", 66)(5, "h3");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 95);
+    i0.ɵɵelementStart(7, "span", 67);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "button", 96);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_28_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
-    i0.ɵɵelement(10, "i", 30);
+    i0.ɵɵelementStart(9, "button", 68);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_23_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeDetailPanel()); });
+    i0.ɵɵelement(10, "i", 69);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 97)(12, "div", 98)(13, "div", 99);
-    i0.ɵɵconditionalCreate(14, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_14_Template, 3, 0, "span", 100)(15, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_15_Template, 3, 0, "span", 101);
-    i0.ɵɵconditionalCreate(16, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_16_Template, 3, 1, "span", 102);
+    i0.ɵɵelementStart(11, "div", 70)(12, "div", 71)(13, "div", 72);
+    i0.ɵɵconditionalCreate(14, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_14_Template, 3, 0, "span", 73)(15, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_15_Template, 3, 0, "span", 74);
+    i0.ɵɵconditionalCreate(16, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_16_Template, 3, 1, "span", 75);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_17_Template, 6, 1, "div", 98);
-    i0.ɵɵelementStart(18, "div", 98)(19, "h4", 103);
-    i0.ɵɵelement(20, "i", 104);
+    i0.ɵɵconditionalCreate(17, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_17_Template, 6, 1, "div", 71);
+    i0.ɵɵelementStart(18, "div", 71)(19, "h4", 76);
+    i0.ɵɵelement(20, "i", 77);
     i0.ɵɵtext(21, " Rankings ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 105)(23, "div", 106)(24, "span", 107);
+    i0.ɵɵelementStart(22, "div", 78)(23, "div", 79)(24, "span", 80);
     i0.ɵɵtext(25, "Power Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "span", 108);
+    i0.ɵɵelementStart(26, "span", 81);
     i0.ɵɵtext(27);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 106)(29, "span", 107);
+    i0.ɵɵelementStart(28, "div", 79)(29, "span", 80);
     i0.ɵɵtext(30, "Speed Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "span", 108);
+    i0.ɵɵelementStart(31, "span", 81);
     i0.ɵɵtext(32);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 106)(34, "span", 107);
+    i0.ɵɵelementStart(33, "div", 79)(34, "span", 80);
     i0.ɵɵtext(35, "Cost Rank");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "span", 108);
+    i0.ɵɵelementStart(36, "span", 81);
     i0.ɵɵtext(37);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(38, "div", 98)(39, "h4", 103);
-    i0.ɵɵelement(40, "i", 109);
+    i0.ɵɵelementStart(38, "div", 71)(39, "h4", 76);
+    i0.ɵɵelement(40, "i", 82);
     i0.ɵɵtext(41, " Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "div", 105)(43, "div", 106)(44, "span", 107);
+    i0.ɵɵelementStart(42, "div", 78)(43, "div", 79)(44, "span", 80);
     i0.ɵɵtext(45, "Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "span", 110);
+    i0.ɵɵelementStart(46, "span", 83);
     i0.ɵɵtext(47);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(48, "div", 106)(49, "span", 107);
+    i0.ɵɵelementStart(48, "div", 79)(49, "span", 80);
     i0.ɵɵtext(50, "Model Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(51, "span", 110);
+    i0.ɵɵelementStart(51, "span", 83);
     i0.ɵɵtext(52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(53, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_53_Template, 5, 1, "div", 106);
-    i0.ɵɵconditionalCreate(54, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_54_Template, 5, 1, "div", 106);
-    i0.ɵɵconditionalCreate(55, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_55_Template, 5, 1, "div", 106);
-    i0.ɵɵconditionalCreate(56, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_56_Template, 5, 0, "div", 106);
-    i0.ɵɵconditionalCreate(57, ModelManagementComponent_Conditional_2_Conditional_28_Conditional_57_Template, 5, 1, "div", 106);
+    i0.ɵɵconditionalCreate(53, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_53_Template, 5, 1, "div", 79);
+    i0.ɵɵconditionalCreate(54, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_54_Template, 5, 1, "div", 79);
+    i0.ɵɵconditionalCreate(55, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_55_Template, 5, 1, "div", 79);
+    i0.ɵɵconditionalCreate(56, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_56_Template, 5, 0, "div", 79);
+    i0.ɵɵconditionalCreate(57, ModelManagementComponent_Conditional_2_Conditional_23_Conditional_57_Template, 5, 1, "div", 79);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(58, "div", 98)(59, "h4", 103);
-    i0.ɵɵelement(60, "i", 111);
+    i0.ɵɵelementStart(58, "div", 71)(59, "h4", 76);
+    i0.ɵɵelement(60, "i", 84);
     i0.ɵɵtext(61, " Timestamps ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "div", 105)(63, "div", 106)(64, "span", 107);
+    i0.ɵɵelementStart(62, "div", 78)(63, "div", 79)(64, "span", 80);
     i0.ɵɵtext(65, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(66, "span", 110);
+    i0.ɵɵelementStart(66, "span", 83);
     i0.ɵɵtext(67);
     i0.ɵɵpipe(68, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(69, "div", 106)(70, "span", 107);
+    i0.ɵɵelementStart(69, "div", 79)(70, "span", 80);
     i0.ɵɵtext(71, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "span", 110);
+    i0.ɵɵelementStart(72, "span", 83);
     i0.ɵɵtext(73);
     i0.ɵɵpipe(74, "date");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(75, "div", 112)(76, "button", 113);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_28_Template_button_click_76_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openModelFromPanel()); });
-    i0.ɵɵelement(77, "i", 114);
+    i0.ɵɵelementStart(75, "div", 85)(76, "button", 86);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Conditional_23_Template_button_click_76_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openModelFromPanel()); });
+    i0.ɵɵelement(77, "i", 87);
     i0.ɵɵtext(78, " Open Full Record ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -744,60 +590,70 @@ function ModelManagementComponent_Conditional_2_Conditional_28_Template(rf, ctx)
 } }
 function ModelManagementComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "h2", 5);
-    i0.ɵɵelement(3, "i", 6);
-    i0.ɵɵtext(4, " AI Models ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 7);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleFilters()); });
-    i0.ɵɵelement(6, "i", 8);
-    i0.ɵɵconditionalCreate(7, ModelManagementComponent_Conditional_2_Conditional_7_Template, 1, 0)(8, ModelManagementComponent_Conditional_2_Conditional_8_Template, 1, 0);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 9);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "button", 12);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setViewMode("grid")); });
-    i0.ɵɵelement(14, "i", 13);
+    i0.ɵɵelementStart(0, "mj-page-header", 2)(1, "div", 3);
+    i0.ɵɵelement(2, "mj-stat-badge", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 5)(4, "mj-filter-popover", 6);
+    i0.ɵɵlistener("ClearAllRequested", function ModelManagementComponent_Conditional_2_Template_mj_filter_popover_ClearAllRequested_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.resetPopoverFilters()); });
+    i0.ɵɵelementStart(5, "mj-filter-panel", 7);
+    i0.ɵɵlistener("ValuesChange", function ModelManagementComponent_Conditional_2_Template_mj_filter_panel_ValuesChange_5_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onFilterValuesChange($event)); })("Reset", function ModelManagementComponent_Conditional_2_Template_mj_filter_panel_Reset_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.resetPopoverFilters()); });
+    i0.ɵɵelementStart(6, "mj-filter-field", 8)(7, "div", 9)(8, "input", 10);
+    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_2_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.powerRankRange.min, $event) || (ctx_r0.powerRankRange.min = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Template_input_change_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.validateAndApplyRankFilters("power")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 11);
+    i0.ɵɵtext(10, "-");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "input", 12);
+    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_2_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.powerRankRange.max, $event) || (ctx_r0.powerRankRange.max = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ModelManagementComponent_Conditional_2_Template_input_change_11_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.validateAndApplyRankFilters("power")); });
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(12, "mj-view-toggle", 13);
+    i0.ɵɵlistener("KeyChange", function ModelManagementComponent_Conditional_2_Template_mj_view_toggle_KeyChange_12_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setViewMode($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 14);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setViewMode("list")); });
-    i0.ɵɵelement(16, "i", 15);
+    i0.ɵɵelementStart(13, "button", 14);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createNewModel()); });
+    i0.ɵɵelement(14, "i", 15);
+    i0.ɵɵtext(15, " New Model ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "button", 16);
-    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_2_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createNewModel()); });
-    i0.ɵɵelement(18, "i", 17);
-    i0.ɵɵtext(19, " New Model ");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(20, "as-split", 18);
-    i0.ɵɵconditionalCreate(21, ModelManagementComponent_Conditional_2_Conditional_21_Template, 67, 14, "as-split-area", 19);
-    i0.ɵɵelementStart(22, "as-split-area")(23, "div", 20);
-    i0.ɵɵconditionalCreate(24, ModelManagementComponent_Conditional_2_Conditional_24_Template, 7, 2, "div", 21)(25, ModelManagementComponent_Conditional_2_Conditional_25_Template, 2, 1);
+    i0.ɵɵelementStart(16, "div", 16)(17, "mj-page-search", 17);
+    i0.ɵɵlistener("ValueChange", function ModelManagementComponent_Conditional_2_Template_mj_page_search_ValueChange_17_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSearchChange($event)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(26, ModelManagementComponent_Conditional_2_Conditional_26_Template, 1, 0, "div", 22);
-    i0.ɵɵelementStart(27, "div", 23);
-    i0.ɵɵconditionalCreate(28, ModelManagementComponent_Conditional_2_Conditional_28_Template, 79, 31);
+    i0.ɵɵelementStart(18, "mj-page-body", 18);
+    i0.ɵɵconditionalCreate(19, ModelManagementComponent_Conditional_2_Conditional_19_Template, 7, 2, "div", 19)(20, ModelManagementComponent_Conditional_2_Conditional_20_Template, 2, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(21, ModelManagementComponent_Conditional_2_Conditional_21_Template, 1, 0, "div", 20);
+    i0.ɵɵelementStart(22, "div", 21);
+    i0.ɵɵconditionalCreate(23, ModelManagementComponent_Conditional_2_Conditional_23_Template, 79, 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r0.showFilters ? 7 : 8);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r0.filteredModels.length, " models");
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r0.viewMode === "grid");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r0.viewMode === "list");
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r0.showFilters ? 21 : -1);
+    i0.ɵɵproperty("Count", ctx_r0.filteredModels.length);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ActiveCount", ctx_r0.ActiveFilterCount)("ShowClearAll", ctx_r0.ActiveFilterCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Fields", ctx_r0.modelFilterFields)("Values", ctx_r0.modelFilterValues);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("max", ctx_r0.maxPowerRank);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.powerRankRange.min);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.filteredModels.length === 0 ? 24 : 25);
+    i0.ɵɵproperty("max", ctx_r0.maxPowerRank);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.powerRankRange.max);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Options", ctx_r0.modelViewOptions)("ActiveKey", ctx_r0.viewMode);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("Value", ctx_r0.searchTerm);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Flex", true);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.filteredModels.length === 0 ? 19 : 20);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.detailPanelVisible ? 26 : -1);
+    i0.ɵɵconditional(ctx_r0.detailPanelVisible ? 21 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("visible", ctx_r0.detailPanelVisible);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.selectedModel ? 28 : -1);
+    i0.ɵɵconditional(ctx_r0.selectedModel ? 23 : -1);
 } }
 /**
  * AI Models Resource - displays AI model management
@@ -1380,6 +1236,95 @@ let ModelManagementComponent = class ModelManagementComponent extends BaseResour
         this.applyFilters();
         this.saveUserPreferencesDebounced();
     }
+    /** Reset only the popover filters — leave searchTerm (toolbar) untouched. */
+    resetPopoverFilters() {
+        this.selectedVendor = 'all';
+        this.selectedType = 'all';
+        this.selectedStatus = 'all';
+        this.powerRankRange = { min: 0, max: this.maxPowerRank };
+        this.applyFilters();
+        this.saveUserPreferencesDebounced();
+    }
+    /** Number of active filter criteria inside the popover (excludes searchTerm + sortBy). */
+    get ActiveFilterCount() {
+        let n = 0;
+        if (this.selectedVendor && this.selectedVendor !== 'all')
+            n++;
+        if (this.selectedType && this.selectedType !== 'all')
+            n++;
+        if (this.selectedStatus && this.selectedStatus !== 'all')
+            n++;
+        if (this.powerRankRange.min > 0 || this.powerRankRange.max < this.maxPowerRank)
+            n++;
+        return n;
+    }
+    /** View-mode options for the shared <mj-view-toggle>. */
+    modelViewOptions = [
+        { key: 'grid', icon: 'fa-solid fa-grip', title: 'Grid View' },
+        { key: 'list', icon: 'fa-solid fa-list', title: 'List View' },
+    ];
+    /** Values record consumed by the centralized <mj-filter-panel>. */
+    get modelFilterValues() {
+        return {
+            sortBy: this.sortBy,
+            selectedVendor: this.selectedVendor,
+            selectedType: this.selectedType,
+            selectedStatus: this.selectedStatus,
+        };
+    }
+    /** Field config consumed by the centralized <mj-filter-panel>. */
+    get modelFilterFields() {
+        return [
+            {
+                key: 'sortBy',
+                type: 'dropdown',
+                label: 'Sort By',
+                icon: 'fa-solid fa-sort',
+                options: this.sortOptions.map(o => ({ text: o.label, value: o.value })),
+            },
+            {
+                key: 'selectedVendor',
+                type: 'dropdown',
+                label: 'Vendor',
+                icon: 'fa-solid fa-building',
+                filterable: this.vendors.length > 10,
+                options: [
+                    { text: 'All Vendors', value: 'all' },
+                    ...this.vendors.map(v => ({ text: v.Name ?? '', value: v.ID })),
+                ],
+            },
+            {
+                key: 'selectedType',
+                type: 'dropdown',
+                label: 'Type',
+                icon: 'fa-solid fa-microchip',
+                options: [
+                    { text: 'All Types', value: 'all' },
+                    ...this.modelTypes.map(t => ({ text: t.Name ?? '', value: t.ID })),
+                ],
+            },
+            {
+                key: 'selectedStatus',
+                type: 'dropdown',
+                label: 'Status',
+                icon: 'fa-solid fa-toggle-on',
+                options: [
+                    { text: 'All Statuses', value: 'all' },
+                    { text: 'Active', value: 'active' },
+                    { text: 'Inactive', value: 'inactive' },
+                ],
+            },
+        ];
+    }
+    /** Receive the updated values record from <mj-filter-panel> and apply it. */
+    onFilterValuesChange(values) {
+        this.sortBy = values['sortBy'] ?? this.sortBy;
+        this.selectedVendor = values['selectedVendor'] ?? 'all';
+        this.selectedType = values['selectedType'] ?? 'all';
+        this.selectedStatus = values['selectedStatus'] ?? 'all';
+        this.applyFilters();
+        this.saveUserPreferencesDebounced();
+    }
     formatTokenLimit(limit) {
         if (limit >= 1000000) {
             return Math.floor(limit / 1000000) + 'M';
@@ -1418,14 +1363,14 @@ let ModelManagementComponent = class ModelManagementComponent extends BaseResour
         return 'fa-solid fa-microchip';
     }
     static ɵfac = function ModelManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModelManagementComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelManagementComponent, selectors: [["app-model-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "model-management-v2"], [1, "loading-container"], ["size", "large", 3, "text"], [1, "dashboard-header"], [1, "header-info"], [1, "dashboard-title"], [1, "fa-solid", "fa-microchip"], ["type", "button", "title", "Toggle Filters", 1, "filter-toggle-btn", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "item-count"], [1, "header-controls"], [1, "view-toggle"], ["type", "button", "title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["type", "button", "title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Create New Model", 1, "control-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], ["direction", "horizontal"], [3, "size", "minSize", "maxSize"], [1, "content-area"], [1, "empty-state"], [1, "detail-panel-overlay"], [1, "detail-panel"], [1, "filter-panel"], [1, "filter-panel-header"], [1, "filter-summary-inline"], [1, "summary-value"], [1, "summary-label"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "filter-group"], [1, "filter-label"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search models...", 1, "filter-input", 3, "input", "value"], [1, "fa-solid", "fa-sort"], [1, "filter-select", 3, "change", "value"], [3, "value"], [1, "fa-solid", "fa-building"], ["value", "all"], [1, "fa-solid", "fa-toggle-on"], ["value", "active"], ["value", "inactive"], [1, "fa-solid", "fa-bolt"], [1, "rank-filter-inputs"], ["type", "number", "min", "0", "placeholder", "Min", 1, "rank-input", 3, "ngModelChange", "change", "max", "ngModel"], [1, "rank-separator"], ["type", "number", "min", "0", "placeholder", "Max", 1, "rank-input", 3, "ngModelChange", "change", "max", "ngModel"], [1, "filter-actions"], ["title", "Reset all filters", 1, "reset-btn", 3, "click"], [1, "fa-solid", "fa-undo"], [1, "fa-solid", "fa-microchip", "fa-4x"], [1, "primary-action"], [1, "primary-action", 3, "click"], [1, "model-grid"], [1, "model-list"], [1, "model-card", 3, "expanded"], [1, "model-card"], [1, "card-header", 3, "click"], [1, "model-info"], [1, "model-icon"], [1, "model-details"], [1, "model-name", 3, "innerHTML"], [1, "model-meta"], [1, "meta-item"], [1, "meta-item", "status-active"], [1, "meta-item", "status-inactive"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "model-description", 3, "innerHTML"], [1, "model-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "model-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "data-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "name-cell"], [3, "innerHTML"], [1, "rank-badge"], [1, "status-badge"], ["title", "View Details", 1, "action-button", "small", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "status-badge", "status-active"], [1, "status-badge", "status-inactive"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-chart-bar"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value", "rank-badge"], [1, "fa-solid", "fa-cog"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"]], template: function ModelManagementComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, ModelManagementComponent_Conditional_1_Template, 2, 1, "div", 1)(2, ModelManagementComponent_Conditional_2_Template, 29, 12);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelManagementComponent, selectors: [["app-model-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "loading-container"], ["size", "large", 3, "text"], ["Title", "Models", "Icon", "fa-solid fa-microchip"], ["meta", ""], ["Label", "models", 3, "Count"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], ["Label", "Power Rank", "Icon", "fa-solid fa-bolt"], [1, "rank-filter-inputs"], ["type", "number", "min", "0", "placeholder", "Min", 1, "rank-input", 3, "ngModelChange", "change", "max", "ngModel"], [1, "rank-separator"], ["type", "number", "min", "0", "placeholder", "Max", 1, "rank-input", 3, "ngModelChange", "change", "max", "ngModel"], [3, "KeyChange", "Options", "ActiveKey"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create New Model", 3, "click"], [1, "fa-solid", "fa-plus"], ["toolbar", ""], ["Placeholder", "Search models...", 3, "ValueChange", "Value"], [3, "Flex"], [1, "empty-state"], [1, "detail-panel-overlay"], [1, "detail-panel"], [1, "fa-solid", "fa-microchip", "fa-4x"], [1, "primary-action"], [1, "primary-action", 3, "click"], [1, "model-grid"], [1, "model-list"], [1, "model-card", 3, "expanded"], [1, "model-card"], [1, "card-header", 3, "click"], [1, "model-info"], [1, "model-icon"], [1, "model-details"], [1, "model-name", 3, "innerHTML"], [1, "model-meta"], [1, "meta-item"], [1, "meta-item", "status-active"], [1, "meta-item", "status-inactive"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "model-description", 3, "innerHTML"], [1, "model-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-building"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "model-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "data-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "name-cell"], [3, "innerHTML"], [1, "rank-badge"], [1, "status-badge"], ["title", "View Details", 1, "action-button", "small", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "status-badge", "status-active"], [1, "status-badge", "status-inactive"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-chart-bar"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value", "rank-badge"], [1, "fa-solid", "fa-cog"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"]], template: function ModelManagementComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout");
+            i0.ɵɵconditionalCreate(1, ModelManagementComponent_Conditional_1_Template, 2, 1, "div", 0)(2, ModelManagementComponent_Conditional_2_Template, 24, 18);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading ? 1 : 2);
-        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.NgControlStatus, i2.MinValidator, i2.MaxValidator, i2.NgModel, i3.SplitComponent, i3.SplitAreaComponent, i4.LoadingComponent, i5.DatePipe, i6.HighlightSearchPipe], styles: ["\n\n\n\n\n\n\n\n.model-management-v2[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-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.dashboard-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\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.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\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.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\nas-split[_ngcontent-%COMP%] {\n  flex: 1;\n  background: var(--mj-bg-surface-card);\n  margin-top: 0;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%]   .filter-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) 15%, transparent);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-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) 15%, transparent);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.rank-filter-inputs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  margin-top: 8px;\n}\n\n.rank-input[_ngcontent-%COMP%] {\n  width: 70px;\n  padding: 10px 12px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 14px;\n  text-align: center;\n  background: var(--mj-bg-surface);\n  transition: all 0.3s;\n  box-sizing: border-box;\n  -moz-appearance: textfield;\n}\n\n.rank-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.rank-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.rank-input[_ngcontent-%COMP%]::-webkit-inner-spin-button, \n.rank-input[_ngcontent-%COMP%]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.rank-separator[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n  height: 100%;\n  padding: 28px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface-card);\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  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  padding: 60px 32px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  opacity: 1;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 32px 0;\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n}\n\n\n\n.model-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.model-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.model-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.model-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.model-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.model-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.model-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.model-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.model-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.model-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.model-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.model-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.model-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 24px 24px;\n}\n\n.model-description[_ngcontent-%COMP%] {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.model-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.model-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-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: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.model-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.data-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child, \n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:nth-last-child(2) {\n  cursor: default;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child:hover, \n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:nth-last-child(2):hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.data-table[_ngcontent-%COMP%]   .sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.data-table[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s ease;\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.name-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n\n\n.rank-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.rank-badge.rank-high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.rank-badge.rank-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.rank-badge.rank-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.rank-badge.rank-none[_ngcontent-%COMP%] {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .content-area[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .model-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .model-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .card-body[_ngcontent-%COMP%] {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  opacity: 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  max-width: 90vw;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n  right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n\n\n.detail-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n\n\n.detail-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column[_ngcontent-%COMP%] {\n  grid-template-columns: 1fr;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.detail-value.muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n\n\n.detail-section[_ngcontent-%COMP%]   .status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.detail-section[_ngcontent-%COMP%]   .status-badge.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.detail-section[_ngcontent-%COMP%]   .status-badge.inactive[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  padding: 12px 24px;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border: none;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n\n\n@media (max-width: 520px) {\n  .detail-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible[_ngcontent-%COMP%] {\n    right: 0;\n  }\n\n  .detail-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .search-highlight, \n.search-highlight[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}"] });
+        } }, dependencies: [i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.NgControlStatus, i2.MinValidator, i2.MaxValidator, i2.NgModel, i3.LoadingComponent, i4.MJButtonDirective, i4.MJPageHeaderComponent, i4.MJPageLayoutComponent, i4.MJPageBodyComponent, i4.MJFilterPopoverComponent, i4.MJPageSearchComponent, i4.MJFilterPanelComponent, i4.MJFilterFieldComponent, i4.MJViewToggleComponent, i4.MJStatBadgeComponent, i5.DatePipe, i6.HighlightSearchPipe], styles: ["\n\n\n\n\n\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n\n[_nghost-%COMP%]   mj-page-body[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n\n.control-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\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.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\nas-split[_ngcontent-%COMP%] {\n  flex: 1;\n  background: var(--mj-bg-surface-card);\n  margin-top: 0;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-value[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%]   .filter-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) 15%, transparent);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-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) 15%, transparent);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select[_ngcontent-%COMP%] {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n\n\n.rank-filter-inputs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  margin-top: 8px;\n}\n\n.rank-input[_ngcontent-%COMP%] {\n  width: 70px;\n  padding: 10px 12px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 14px;\n  text-align: center;\n  background: var(--mj-bg-surface);\n  transition: all 0.3s;\n  box-sizing: border-box;\n  -moz-appearance: textfield;\n}\n\n.rank-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.rank-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.rank-input[_ngcontent-%COMP%]::-webkit-inner-spin-button, \n.rank-input[_ngcontent-%COMP%]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.rank-separator[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\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  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  padding: 60px 32px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  opacity: 1;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 32px 0;\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n}\n\n\n\n.model-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.model-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.model-card[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.model-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.model-card[_ngcontent-%COMP%]:hover::before {\n  opacity: 1;\n}\n\n.model-card.expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.model-card.expanded[_ngcontent-%COMP%]::before {\n  opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.model-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.model-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.model-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.model-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.model-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.model-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 24px 24px 24px;\n}\n\n.model-description[_ngcontent-%COMP%] {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.model-description.text-muted[_ngcontent-%COMP%] {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.model-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-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: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n.model-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.data-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child, \n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:nth-last-child(2) {\n  cursor: default;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:last-child:hover, \n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:nth-last-child(2):hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th.sorted.desc[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.data-table[_ngcontent-%COMP%]   .sort-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.data-table[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.data-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s ease;\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.name-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.name-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n\n\n.rank-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.rank-badge.rank-high[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.rank-badge.rank-medium[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.rank-badge.rank-low[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.rank-badge.rank-none[_ngcontent-%COMP%] {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n\n\n@media (max-width: 768px) {\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls[_ngcontent-%COMP%] {\n    justify-content: center;\n  }\n\n  .model-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .model-stats[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .card-body[_ngcontent-%COMP%] {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions[_ngcontent-%COMP%] {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  opacity: 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  max-width: 90vw;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n  right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n\n\n.detail-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n\n\n.detail-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column[_ngcontent-%COMP%] {\n  grid-template-columns: 1fr;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.detail-value.muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n\n\n.detail-section[_ngcontent-%COMP%]   .status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.detail-section[_ngcontent-%COMP%]   .status-badge.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.detail-section[_ngcontent-%COMP%]   .status-badge.inactive[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n  padding: 12px 24px;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border: none;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n\n\n@media (max-width: 520px) {\n  .detail-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible[_ngcontent-%COMP%] {\n    right: 0;\n  }\n\n  .detail-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .search-highlight, \n.search-highlight[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}"] });
 };
 ModelManagementComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIModelsResource')
@@ -1433,7 +1378,7 @@ ModelManagementComponent = __decorate([
 export { ModelManagementComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModelManagementComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-model-management', template: "<div class=\"model-management-v2\">\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <mj-loading [text]=\"currentLoadingMessage\" size=\"large\"></mj-loading>\n    </div>\n  } @else {\n    <div class=\"dashboard-header\">\n      <div class=\"header-info\">\n        <h2 class=\"dashboard-title\">\n          <i class=\"fa-solid fa-microchip\"></i>\n          AI Models\n        </h2>\n        <button\n          type=\"button\"\n          class=\"filter-toggle-btn\"\n          (click)=\"toggleFilters()\"\n          title=\"Toggle Filters\">\n          <i class=\"fa-solid fa-filter\"></i>\n          @if (showFilters) {\n            Hide Filters\n          } @else {\n            Show Filters\n          }\n        </button>\n        <span class=\"item-count\">{{ filteredModels.length }} models</span>\n      </div>\n\n      <div class=\"header-controls\">\n        <div class=\"view-toggle\">\n          <button\n            type=\"button\"\n            class=\"view-btn\"\n            [class.active]=\"viewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-grip\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"view-btn\"\n            [class.active]=\"viewMode === 'list'\"\n            (click)=\"setViewMode('list')\"\n            title=\"List View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"control-btn primary\"\n          (click)=\"createNewModel()\"\n          title=\"Create New Model\">\n          <i class=\"fa-solid fa-plus\"></i>\n          New Model\n        </button>\n      </div>\n    </div>\n\n    <as-split direction=\"horizontal\">\n      @if (showFilters) {\n        <as-split-area [size]=\"20\" [minSize]=\"15\" [maxSize]=\"25\">\n          <div class=\"filter-panel\">\n            <div class=\"filter-panel-header\">\n              <h3>Model Filters</h3>\n              <div class=\"filter-summary-inline\">\n                <span class=\"summary-value\">{{ filteredModels.length }}</span>\n                <span class=\"summary-label\">of {{ models.length }}</span>\n              </div>\n              <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n                <span class=\"fa-solid fa-times\"></span>\n              </button>\n            </div>\n            \n            <div class=\"filter-content\">\n              <!-- Search Filter -->\n              <div class=\"filter-group\">\n                <label class=\"filter-label\">\n                  <span class=\"fa-solid fa-search\"></span>\n                  Name\n                </label>\n                <input \n                  type=\"text\"\n                  class=\"filter-input\"\n                  placeholder=\"Search models...\"\n                  [value]=\"searchTerm\"\n                  (input)=\"onSearchChange($any($event.target).value)\"\n                />\n              </div>\n\n              <!-- Sort By Filter -->\n              <div class=\"filter-group\">\n                <label class=\"filter-label\">\n                  <span class=\"fa-solid fa-sort\"></span>\n                  Sort By\n                </label>\n                <select class=\"filter-select\" [value]=\"sortBy\" (change)=\"onSortChange($any($event.target).value)\">\n                  @for (option of sortOptions; track option.value) {\n                    <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </select>\n              </div>\n\n              <!-- Vendor Filter -->\n              <div class=\"filter-group\">\n                <label class=\"filter-label\">\n                  <span class=\"fa-solid fa-building\"></span>\n                  Vendor\n                </label>\n                <select class=\"filter-select\" [value]=\"selectedVendor\" (change)=\"onVendorChange($any($event.target).value)\">\n                  <option value=\"all\">All Vendors</option>\n                  @for (vendor of vendors; track vendor.ID) {\n                    <option [value]=\"vendor.ID\">{{ vendor.Name }}</option>\n                  }\n                </select>\n              </div>\n\n              <!-- Type Filter -->\n              <div class=\"filter-group\">\n                <label class=\"filter-label\">\n                  <span class=\"fa-solid fa-microchip\"></span>\n                  Type\n                </label>\n                <select class=\"filter-select\" [value]=\"selectedType\" (change)=\"onTypeChange($any($event.target).value)\">\n                  <option value=\"all\">All Types</option>\n                  @for (type of modelTypes; track type.ID) {\n                    <option [value]=\"type.ID\">{{ type.Name }}</option>\n                  }\n                </select>\n              </div>\n\n              <!-- Status Filter -->\n              <div class=\"filter-group\">\n                <label class=\"filter-label\">\n                  <span class=\"fa-solid fa-toggle-on\"></span>\n                  Status\n                </label>\n                <select class=\"filter-select\" [value]=\"selectedStatus\" (change)=\"onStatusChange($any($event.target).value)\">\n                  <option value=\"all\">All Statuses</option>\n                  <option value=\"active\">Active</option>\n                  <option value=\"inactive\">Inactive</option>\n                </select>\n              </div>\n\n              <!-- Power Rank Filter -->\n              <div class=\"filter-group\">\n                <label class=\"filter-label\">\n                  <span class=\"fa-solid fa-bolt\"></span>\n                  Power Rank\n                </label>\n                <div class=\"rank-filter-inputs\">\n                  <input \n                    type=\"number\" \n                    min=\"0\" \n                    [max]=\"maxPowerRank\" \n                    [(ngModel)]=\"powerRankRange.min\"\n                    (change)=\"validateAndApplyRankFilters('power')\"\n                    class=\"rank-input\"\n                    placeholder=\"Min\"\n                  />\n                  <span class=\"rank-separator\">-</span>\n                  <input \n                    type=\"number\" \n                    min=\"0\" \n                    [max]=\"maxPowerRank\" \n                    [(ngModel)]=\"powerRankRange.max\"\n                    (change)=\"validateAndApplyRankFilters('power')\"\n                    class=\"rank-input\"\n                    placeholder=\"Max\"\n                  />\n                </div>\n              </div>\n\n              <!-- Reset Button -->\n              <div class=\"filter-actions\">\n                <button class=\"reset-btn\" (click)=\"clearFilters()\" title=\"Reset all filters\">\n                  <span class=\"fa-solid fa-undo\"></span>\n                  Reset Filters\n                </button>\n              </div>\n            </div>\n          </div>\n        </as-split-area>\n      }\n\n      <as-split-area>\n        <div class=\"content-area\">\n          @if (filteredModels.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-microchip fa-4x\"></i>\n              <h3>No models found</h3>\n              <p>{{ hasActiveFilters ? 'Try adjusting your filters' : 'Create your first AI model to get started' }}</p>\n              @if (!hasActiveFilters) {\n                <button class=\"primary-action\" (click)=\"createNewModel()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create First Model\n                </button>\n              }\n            </div>\n          } @else {\n            @switch (viewMode) {\n              @case ('grid') {\n                <div class=\"model-grid\">\n                  @for (model of filteredModels; track model.ID) {\n                    <div class=\"model-card\" [class.expanded]=\"expandedModelId === model.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleModelExpansion(model.ID)\">\n                        <div class=\"model-info\">\n                          <div class=\"model-icon\">\n                            <i [class]=\"getModelIcon(model)\"></i>\n                          </div>\n                          <div class=\"model-details\">\n                            <h4 class=\"model-name\" [innerHTML]=\"(model.Name || 'Unnamed Model') | highlightSearch:searchTerm\"></h4>\n                            <div class=\"model-meta\">\n                              @if (model.Vendor) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-building\"></i>\n                                  {{ model.Vendor }}\n                                </span>\n                              }\n                              @if (model.AIModelType) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-microchip\"></i>\n                                  {{ model.AIModelType }}\n                                </span>\n                              }\n                              @if (model.IsActive) {\n                                <span class=\"meta-item status-active\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  Active\n                                </span>\n                              } @else {\n                                <span class=\"meta-item status-inactive\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  Inactive\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n\n                        <i class=\"fa-solid fa-chevron-down expand-icon\"\n                           [class.rotated]=\"expandedModelId === model.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (model.Description) {\n                          <p class=\"model-description\" [innerHTML]=\"model.Description | highlightSearch:searchTerm\"></p>\n                        } @else {\n                          <p class=\"model-description text-muted\">No description provided</p>\n                        }\n\n                        <!-- Expandable Content -->\n                        @if (expandedModelId === model.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"model-stats\">\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Power Rank</span>\n                                <span class=\"stat-value\">{{ formatRank(model.PowerRank, 'power') }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Speed Rank</span>\n                                <span class=\"stat-value\">{{ formatRank(model.SpeedRank, 'speed') }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Cost Rank</span>\n                                <span class=\"stat-value\">{{ formatRank(model.CostRank, 'cost') }}</span>\n                              </div>\n                              @if (model.InputTokenLimit) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Token Limit</span>\n                                  <span class=\"stat-value\">{{ formatTokenLimit(model.InputTokenLimit) }}</span>\n                                </div>\n                              }\n                              @if (model.APIName) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">API Name</span>\n                                  <span class=\"stat-value\">{{ model.APIName }}</span>\n                                </div>\n                              }\n                              @if (model.DriverClass) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Driver</span>\n                                  <span class=\"stat-value\">{{ model.DriverClass }}</span>\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        <button\n                          type=\"button\"\n                          class=\"action-btn\"\n                          (click)=\"showModelDetails(model, $event)\"\n                          title=\"View Details\">\n                          <i class=\"fa-solid fa-eye\"></i>\n                          Details\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              @case ('list') {\n                <div class=\"model-list\">\n                  <table class=\"data-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"onSortChange('name')\"\n                            [class.sorted]=\"sortBy === 'name'\"\n                            [class.desc]=\"sortBy === 'name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('vendor')\"\n                            [class.sorted]=\"sortBy === 'vendor'\"\n                            [class.desc]=\"sortBy === 'vendor' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Vendor\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('type')\"\n                            [class.sorted]=\"sortBy === 'type'\"\n                            [class.desc]=\"sortBy === 'type' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Type\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('powerRank')\"\n                            [class.sorted]=\"sortBy === 'powerRank'\"\n                            [class.desc]=\"sortBy === 'powerRank' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Power\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('speedRank')\"\n                            [class.sorted]=\"sortBy === 'speedRank'\"\n                            [class.desc]=\"sortBy === 'speedRank' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Speed\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('costRank')\"\n                            [class.sorted]=\"sortBy === 'costRank'\"\n                            [class.desc]=\"sortBy === 'costRank' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Cost\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Status</th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (model of filteredModels; track model.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"name-cell\">\n                              <i [class]=\"getModelIcon(model)\"></i>\n                              <span [innerHTML]=\"(model.Name || 'Unnamed Model') | highlightSearch:searchTerm\"></span>\n                            </div>\n                          </td>\n                          <td>{{ model.Vendor || '-' }}</td>\n                          <td>{{ model.AIModelType }}</td>\n                          <td>\n                            <span class=\"rank-badge\" [class]=\"getRankClass(model.PowerRank, 'power')\">\n                              {{ formatRank(model.PowerRank, 'power') }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"rank-badge\" [class]=\"getRankClass(model.SpeedRank, 'speed')\">\n                              {{ formatRank(model.SpeedRank, 'speed') }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"rank-badge\" [class]=\"getRankClass(model.CostRank, 'cost')\">\n                              {{ formatRank(model.CostRank, 'cost') }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class.active]=\"model.IsActive\" [class.inactive]=\"!model.IsActive\">\n                              {{ model.IsActive ? 'Active' : 'Inactive' }}\n                            </span>\n                          </td>\n                          <td>\n                            <button class=\"action-button small\" (click)=\"showModelDetails(model)\" title=\"View Details\">\n                              <i class=\"fa-solid fa-eye\"></i>\n                            </button>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n        </div>\n      </as-split-area>\n    </as-split>\n\n    <!-- Detail Panel Overlay -->\n    @if (detailPanelVisible) {\n      <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n    }\n\n    <!-- Detail Panel -->\n    <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n      @if (selectedModel) {\n        <!-- Panel Header -->\n        <div class=\"detail-panel-header\">\n          <div class=\"detail-panel-title\">\n            <div class=\"detail-icon\">\n              <i [class]=\"getModelIcon(selectedModel)\"></i>\n            </div>\n            <div class=\"detail-title-info\">\n              <h3>{{ selectedModel.Name }}</h3>\n              <span class=\"detail-subtitle\">{{ selectedModel.Vendor || 'AI Model' }}</span>\n            </div>\n          </div>\n          <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n\n        <!-- Panel Content -->\n        <div class=\"detail-panel-content\">\n          <!-- Status Section -->\n          <div class=\"detail-section\">\n            <div class=\"detail-badges\">\n              @if (selectedModel.IsActive) {\n                <span class=\"status-badge status-active\">\n                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                  Active\n                </span>\n              } @else {\n                <span class=\"status-badge status-inactive\">\n                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                  Inactive\n                </span>\n              }\n              @if (selectedModel.AIModelType) {\n                <span class=\"feature-badge\">\n                  <i class=\"fa-solid fa-microchip\"></i>\n                  {{ selectedModel.AIModelType }}\n                </span>\n              }\n            </div>\n          </div>\n\n          <!-- Description -->\n          @if (selectedModel.Description) {\n            <div class=\"detail-section\">\n              <h4 class=\"detail-section-title\">\n                <i class=\"fa-solid fa-align-left\"></i>\n                Description\n              </h4>\n              <p class=\"detail-description\">{{ selectedModel.Description }}</p>\n            </div>\n          }\n\n          <!-- Ranking Details -->\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-chart-bar\"></i>\n              Rankings\n            </h4>\n            <div class=\"detail-grid\">\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Power Rank</span>\n                <span class=\"detail-value rank-badge\" [class]=\"getRankClass(selectedModel.PowerRank, 'power')\">\n                  {{ formatRank(selectedModel.PowerRank, 'power') }}\n                </span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Speed Rank</span>\n                <span class=\"detail-value rank-badge\" [class]=\"getRankClass(selectedModel.SpeedRank, 'speed')\">\n                  {{ formatRank(selectedModel.SpeedRank, 'speed') }}\n                </span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Cost Rank</span>\n                <span class=\"detail-value rank-badge\" [class]=\"getRankClass(selectedModel.CostRank, 'cost')\">\n                  {{ formatRank(selectedModel.CostRank, 'cost') }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Configuration Details -->\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-cog\"></i>\n              Configuration\n            </h4>\n            <div class=\"detail-grid\">\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Vendor</span>\n                <span class=\"detail-value\">{{ selectedModel.Vendor || 'Unknown' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Model Type</span>\n                <span class=\"detail-value\">{{ selectedModel.AIModelType || 'Unknown' }}</span>\n              </div>\n              @if (selectedModel.APIName) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">API Name</span>\n                  <span class=\"detail-value\">{{ selectedModel.APIName }}</span>\n                </div>\n              }\n              @if (selectedModel.InputTokenLimit) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Input Token Limit</span>\n                  <span class=\"detail-value\">{{ formatTokenLimit(selectedModel.InputTokenLimit) }}</span>\n                </div>\n              }\n              @if (selectedModel.SupportedResponseFormats) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Response Formats</span>\n                  <span class=\"detail-value\">{{ selectedModel.SupportedResponseFormats }}</span>\n                </div>\n              }\n              @if (selectedModel.SupportsEffortLevel) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Supports Effort Level</span>\n                  <span class=\"detail-value\">Yes</span>\n                </div>\n              }\n              @if (selectedModel.DriverClass) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Driver Class</span>\n                  <span class=\"detail-value\">{{ selectedModel.DriverClass }}</span>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Timestamps -->\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-clock\"></i>\n              Timestamps\n            </h4>\n            <div class=\"detail-grid\">\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">{{ selectedModel.__mj_CreatedAt | date:'medium' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Updated</span>\n                <span class=\"detail-value\">{{ selectedModel.__mj_UpdatedAt | date:'medium' }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Panel Actions -->\n        <div class=\"detail-panel-actions\">\n          <button\n            type=\"button\"\n            class=\"detail-action-btn primary\"\n            (click)=\"openModelFromPanel()\">\n            <i class=\"fa-solid fa-external-link-alt\"></i>\n            Open Full Record\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>", styles: ["/* ============================================\n   AI Models Dashboard - World-Class Design\n   Clean header with brand blue accents\n   ============================================ */\n\n/* Container */\n.model-management-v2 {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Dashboard Header - Clean White Style */\n.dashboard-header {\n  background: var(--mj-bg-surface);\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  position: relative;\n  z-index: 10;\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.dashboard-title {\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.dashboard-title i {\n  color: var(--mj-brand-primary);\n  font-size: 22px;\n}\n\n.filter-toggle-btn {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\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.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.filter-toggle-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.item-count {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 20px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.header-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.view-btn {\n  background: transparent;\n  border: none;\n  padding: 8px 14px;\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 15px;\n}\n\n.view-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.view-btn.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\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.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Splitter */\nas-split {\n  flex: 1;\n  background: var(--mj-bg-surface-card);\n  margin-top: 0;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Header */\n.filter-panel-header {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header .filter-summary-inline {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n.filter-panel-header .close-btn {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header .close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header .close-btn .fa-solid {\n  font-size: 14px;\n}\n\n/* Content Area */\n.filter-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n/* Filter Groups */\n.filter-group {\n  margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group .filter-label .fa-solid {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group .filter-input,\n.filter-group .filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select: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) 15%, transparent);\n}\n\n.filter-group .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group .filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Legacy support for non-scoped selectors */\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input:focus,\n.filter-select: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) 15%, transparent);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Rank Filter */\n.rank-filter-inputs {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  margin-top: 8px;\n}\n\n.rank-input {\n  width: 70px;\n  padding: 10px 12px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 14px;\n  text-align: center;\n  background: var(--mj-bg-surface);\n  transition: all 0.3s;\n  box-sizing: border-box;\n  -moz-appearance: textfield;\n}\n\n.rank-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.rank-input::placeholder {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.rank-input::-webkit-inner-spin-button,\n.rank-input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.rank-separator {\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Filter Actions */\n.filter-actions {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions .reset-btn {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions .reset-btn .fa-solid {\n  font-size: 13px;\n}\n\n/* Scrollbar Styling */\n.filter-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* Content Area */\n.content-area {\n  height: 100%;\n  padding: 28px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  padding: 60px 32px;\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  opacity: 1;\n}\n\n.empty-state h3 {\n  margin: 0 0 12px 0;\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.empty-state p {\n  margin: 0 0 32px 0;\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n}\n\n/* Grid View */\n.model-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.model-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.model-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.model-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.model-card:hover::before {\n  opacity: 1;\n}\n\n.model-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.model-card.expanded::before {\n  opacity: 1;\n}\n\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.model-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.model-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.model-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.model-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.model-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.model-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.model-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.model-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.model-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.model-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.data-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.data-table thead {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table thead tr {\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.data-table thead th {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.data-table thead th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.data-table thead th:last-child,\n.data-table thead th:nth-last-child(2) {\n  cursor: default;\n}\n\n.data-table thead th:last-child:hover,\n.data-table thead th:nth-last-child(2):hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.data-table thead th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.data-table thead th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.data-table .sort-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.data-table .sort-icon {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.data-table thead th:hover .sort-icon {\n  opacity: 0.5;\n}\n\n.data-table thead th.sorted .sort-icon {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.data-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s ease;\n}\n\n.data-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.data-table tbody tr:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table tbody td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.name-cell {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.name-cell i {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n/* Rank Badge */\n.rank-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.rank-badge.rank-high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.rank-badge.rank-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.rank-badge.rank-low {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.rank-badge.rank-none {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.status-badge.active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.inactive {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .content-area {\n    padding: 16px;\n  }\n\n  .model-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .model-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n/* ============================================\n   Detail Panel - Slide-in Panel\n   ============================================ */\n\n/* Detail Panel Overlay */\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  opacity: 0;\n  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n@keyframes fadeIn {\n  to {\n    opacity: 1;\n  }\n}\n\n/* Detail Panel */\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  max-width: 90vw;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n/* Detail Section */\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-inactive {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-section-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n/* Detail Grid */\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column {\n  grid-template-columns: 1fr;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n.detail-value.muted {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n/* Status Badges in Detail Panel */\n.detail-section .status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.detail-section .status-badge.active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.detail-section .status-badge.inactive {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  padding: 12px 24px;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: none;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n/* Responsive adjustments for detail panel */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible {\n    right: 0;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-model-management', template: "<mj-page-layout>\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <mj-loading [text]=\"currentLoadingMessage\" size=\"large\"></mj-loading>\n    </div>\n  } @else {\n    <mj-page-header\n      Title=\"Models\"\n      Icon=\"fa-solid fa-microchip\">\n      <div meta>\n        <mj-stat-badge [Count]=\"filteredModels.length\" Label=\"models\"></mj-stat-badge>\n      </div>\n      <div actions>\n        <mj-filter-popover\n          [ActiveCount]=\"ActiveFilterCount\"\n          [ShowClearAll]=\"ActiveFilterCount > 0\"\n          (ClearAllRequested)=\"resetPopoverFilters()\">\n          <mj-filter-panel\n            [Fields]=\"modelFilterFields\"\n            [Values]=\"modelFilterValues\"\n            (ValuesChange)=\"onFilterValuesChange($event)\"\n            (Reset)=\"resetPopoverFilters()\">\n            <!-- Custom widget: Power Rank range (min/max number inputs) -->\n            <mj-filter-field Label=\"Power Rank\" Icon=\"fa-solid fa-bolt\">\n              <div class=\"rank-filter-inputs\">\n                <input\n                  type=\"number\"\n                  min=\"0\"\n                  [max]=\"maxPowerRank\"\n                  [(ngModel)]=\"powerRankRange.min\"\n                  (change)=\"validateAndApplyRankFilters('power')\"\n                  class=\"rank-input\"\n                  placeholder=\"Min\" />\n                <span class=\"rank-separator\">-</span>\n                <input\n                  type=\"number\"\n                  min=\"0\"\n                  [max]=\"maxPowerRank\"\n                  [(ngModel)]=\"powerRankRange.max\"\n                  (change)=\"validateAndApplyRankFilters('power')\"\n                  class=\"rank-input\"\n                  placeholder=\"Max\" />\n              </div>\n            </mj-filter-field>\n          </mj-filter-panel>\n        </mj-filter-popover>\n\n        <mj-view-toggle\n          [Options]=\"modelViewOptions\"\n          [ActiveKey]=\"viewMode\"\n          (KeyChange)=\"setViewMode($any($event))\">\n        </mj-view-toggle>\n\n        <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewModel()\" title=\"Create New Model\">\n          <i class=\"fa-solid fa-plus\"></i>\n          New Model\n        </button>\n      </div>\n      <div toolbar>\n        <mj-page-search\n          Placeholder=\"Search models...\"\n          [Value]=\"searchTerm\"\n          (ValueChange)=\"onSearchChange($event)\">\n        </mj-page-search>\n      </div>\n    </mj-page-header>\n\n    <mj-page-body [Flex]=\"true\">\n          @if (filteredModels.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-microchip fa-4x\"></i>\n              <h3>No models found</h3>\n              <p>{{ hasActiveFilters ? 'Try adjusting your filters' : 'Create your first AI model to get started' }}</p>\n              @if (!hasActiveFilters) {\n                <button class=\"primary-action\" (click)=\"createNewModel()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create First Model\n                </button>\n              }\n            </div>\n          } @else {\n            @switch (viewMode) {\n              @case ('grid') {\n                <div class=\"model-grid\">\n                  @for (model of filteredModels; track model.ID) {\n                    <div class=\"model-card\" [class.expanded]=\"expandedModelId === model.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleModelExpansion(model.ID)\">\n                        <div class=\"model-info\">\n                          <div class=\"model-icon\">\n                            <i [class]=\"getModelIcon(model)\"></i>\n                          </div>\n                          <div class=\"model-details\">\n                            <h4 class=\"model-name\" [innerHTML]=\"(model.Name || 'Unnamed Model') | highlightSearch:searchTerm\"></h4>\n                            <div class=\"model-meta\">\n                              @if (model.Vendor) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-building\"></i>\n                                  {{ model.Vendor }}\n                                </span>\n                              }\n                              @if (model.AIModelType) {\n                                <span class=\"meta-item\">\n                                  <i class=\"fa-solid fa-microchip\"></i>\n                                  {{ model.AIModelType }}\n                                </span>\n                              }\n                              @if (model.IsActive) {\n                                <span class=\"meta-item status-active\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  Active\n                                </span>\n                              } @else {\n                                <span class=\"meta-item status-inactive\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  Inactive\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n\n                        <i class=\"fa-solid fa-chevron-down expand-icon\"\n                           [class.rotated]=\"expandedModelId === model.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (model.Description) {\n                          <p class=\"model-description\" [innerHTML]=\"model.Description | highlightSearch:searchTerm\"></p>\n                        } @else {\n                          <p class=\"model-description text-muted\">No description provided</p>\n                        }\n\n                        <!-- Expandable Content -->\n                        @if (expandedModelId === model.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"model-stats\">\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Power Rank</span>\n                                <span class=\"stat-value\">{{ formatRank(model.PowerRank, 'power') }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Speed Rank</span>\n                                <span class=\"stat-value\">{{ formatRank(model.SpeedRank, 'speed') }}</span>\n                              </div>\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Cost Rank</span>\n                                <span class=\"stat-value\">{{ formatRank(model.CostRank, 'cost') }}</span>\n                              </div>\n                              @if (model.InputTokenLimit) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Token Limit</span>\n                                  <span class=\"stat-value\">{{ formatTokenLimit(model.InputTokenLimit) }}</span>\n                                </div>\n                              }\n                              @if (model.APIName) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">API Name</span>\n                                  <span class=\"stat-value\">{{ model.APIName }}</span>\n                                </div>\n                              }\n                              @if (model.DriverClass) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Driver</span>\n                                  <span class=\"stat-value\">{{ model.DriverClass }}</span>\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        <button\n                          type=\"button\"\n                          class=\"action-btn\"\n                          (click)=\"showModelDetails(model, $event)\"\n                          title=\"View Details\">\n                          <i class=\"fa-solid fa-eye\"></i>\n                          Details\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              @case ('list') {\n                <div class=\"model-list\">\n                  <table class=\"data-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"onSortChange('name')\"\n                            [class.sorted]=\"sortBy === 'name'\"\n                            [class.desc]=\"sortBy === 'name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('vendor')\"\n                            [class.sorted]=\"sortBy === 'vendor'\"\n                            [class.desc]=\"sortBy === 'vendor' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Vendor\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('type')\"\n                            [class.sorted]=\"sortBy === 'type'\"\n                            [class.desc]=\"sortBy === 'type' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Type\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('powerRank')\"\n                            [class.sorted]=\"sortBy === 'powerRank'\"\n                            [class.desc]=\"sortBy === 'powerRank' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Power\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('speedRank')\"\n                            [class.sorted]=\"sortBy === 'speedRank'\"\n                            [class.desc]=\"sortBy === 'speedRank' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Speed\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th (click)=\"onSortChange('costRank')\"\n                            [class.sorted]=\"sortBy === 'costRank'\"\n                            [class.desc]=\"sortBy === 'costRank' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Cost\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Status</th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (model of filteredModels; track model.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"name-cell\">\n                              <i [class]=\"getModelIcon(model)\"></i>\n                              <span [innerHTML]=\"(model.Name || 'Unnamed Model') | highlightSearch:searchTerm\"></span>\n                            </div>\n                          </td>\n                          <td>{{ model.Vendor || '-' }}</td>\n                          <td>{{ model.AIModelType }}</td>\n                          <td>\n                            <span class=\"rank-badge\" [class]=\"getRankClass(model.PowerRank, 'power')\">\n                              {{ formatRank(model.PowerRank, 'power') }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"rank-badge\" [class]=\"getRankClass(model.SpeedRank, 'speed')\">\n                              {{ formatRank(model.SpeedRank, 'speed') }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"rank-badge\" [class]=\"getRankClass(model.CostRank, 'cost')\">\n                              {{ formatRank(model.CostRank, 'cost') }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class.active]=\"model.IsActive\" [class.inactive]=\"!model.IsActive\">\n                              {{ model.IsActive ? 'Active' : 'Inactive' }}\n                            </span>\n                          </td>\n                          <td>\n                            <button class=\"action-button small\" (click)=\"showModelDetails(model)\" title=\"View Details\">\n                              <i class=\"fa-solid fa-eye\"></i>\n                            </button>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n    </mj-page-body>\n\n    <!-- Detail Panel Overlay -->\n    @if (detailPanelVisible) {\n      <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n    }\n\n    <!-- Detail Panel -->\n    <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n      @if (selectedModel) {\n        <!-- Panel Header -->\n        <div class=\"detail-panel-header\">\n          <div class=\"detail-panel-title\">\n            <div class=\"detail-icon\">\n              <i [class]=\"getModelIcon(selectedModel)\"></i>\n            </div>\n            <div class=\"detail-title-info\">\n              <h3>{{ selectedModel.Name }}</h3>\n              <span class=\"detail-subtitle\">{{ selectedModel.Vendor || 'AI Model' }}</span>\n            </div>\n          </div>\n          <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n\n        <!-- Panel Content -->\n        <div class=\"detail-panel-content\">\n          <!-- Status Section -->\n          <div class=\"detail-section\">\n            <div class=\"detail-badges\">\n              @if (selectedModel.IsActive) {\n                <span class=\"status-badge status-active\">\n                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                  Active\n                </span>\n              } @else {\n                <span class=\"status-badge status-inactive\">\n                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                  Inactive\n                </span>\n              }\n              @if (selectedModel.AIModelType) {\n                <span class=\"feature-badge\">\n                  <i class=\"fa-solid fa-microchip\"></i>\n                  {{ selectedModel.AIModelType }}\n                </span>\n              }\n            </div>\n          </div>\n\n          <!-- Description -->\n          @if (selectedModel.Description) {\n            <div class=\"detail-section\">\n              <h4 class=\"detail-section-title\">\n                <i class=\"fa-solid fa-align-left\"></i>\n                Description\n              </h4>\n              <p class=\"detail-description\">{{ selectedModel.Description }}</p>\n            </div>\n          }\n\n          <!-- Ranking Details -->\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-chart-bar\"></i>\n              Rankings\n            </h4>\n            <div class=\"detail-grid\">\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Power Rank</span>\n                <span class=\"detail-value rank-badge\" [class]=\"getRankClass(selectedModel.PowerRank, 'power')\">\n                  {{ formatRank(selectedModel.PowerRank, 'power') }}\n                </span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Speed Rank</span>\n                <span class=\"detail-value rank-badge\" [class]=\"getRankClass(selectedModel.SpeedRank, 'speed')\">\n                  {{ formatRank(selectedModel.SpeedRank, 'speed') }}\n                </span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Cost Rank</span>\n                <span class=\"detail-value rank-badge\" [class]=\"getRankClass(selectedModel.CostRank, 'cost')\">\n                  {{ formatRank(selectedModel.CostRank, 'cost') }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Configuration Details -->\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-cog\"></i>\n              Configuration\n            </h4>\n            <div class=\"detail-grid\">\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Vendor</span>\n                <span class=\"detail-value\">{{ selectedModel.Vendor || 'Unknown' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Model Type</span>\n                <span class=\"detail-value\">{{ selectedModel.AIModelType || 'Unknown' }}</span>\n              </div>\n              @if (selectedModel.APIName) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">API Name</span>\n                  <span class=\"detail-value\">{{ selectedModel.APIName }}</span>\n                </div>\n              }\n              @if (selectedModel.InputTokenLimit) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Input Token Limit</span>\n                  <span class=\"detail-value\">{{ formatTokenLimit(selectedModel.InputTokenLimit) }}</span>\n                </div>\n              }\n              @if (selectedModel.SupportedResponseFormats) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Response Formats</span>\n                  <span class=\"detail-value\">{{ selectedModel.SupportedResponseFormats }}</span>\n                </div>\n              }\n              @if (selectedModel.SupportsEffortLevel) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Supports Effort Level</span>\n                  <span class=\"detail-value\">Yes</span>\n                </div>\n              }\n              @if (selectedModel.DriverClass) {\n                <div class=\"detail-item\">\n                  <span class=\"detail-label\">Driver Class</span>\n                  <span class=\"detail-value\">{{ selectedModel.DriverClass }}</span>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Timestamps -->\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-clock\"></i>\n              Timestamps\n            </h4>\n            <div class=\"detail-grid\">\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">{{ selectedModel.__mj_CreatedAt | date:'medium' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Updated</span>\n                <span class=\"detail-value\">{{ selectedModel.__mj_UpdatedAt | date:'medium' }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Panel Actions -->\n        <div class=\"detail-panel-actions\">\n          <button\n            type=\"button\"\n            class=\"detail-action-btn primary\"\n            (click)=\"openModelFromPanel()\">\n            <i class=\"fa-solid fa-external-link-alt\"></i>\n            Open Full Record\n          </button>\n        </div>\n      }\n    </div>\n  }\n</mj-page-layout>", styles: ["/* ============================================\n   AI Models Dashboard - World-Class Design\n   Clean header with brand blue accents\n   ============================================ */\n\n/* Container is now provided by <mj-page-layout> */\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Tinted card background on the body \u2014 matches the original .content-area\n   surface treatment so model cards sit on a lightly-tinted surface. */\n:host mj-page-body {\n  background: var(--mj-bg-surface-card);\n}\n\n/* View toggle now provided by <mj-view-toggle>. */\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\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.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Splitter */\nas-split {\n  flex: 1;\n  background: var(--mj-bg-surface-card);\n  margin-top: 0;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Header */\n.filter-panel-header {\n  padding: 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  flex: 1;\n  letter-spacing: -0.02em;\n}\n\n.filter-panel-header .filter-summary-inline {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  margin-right: 16px;\n  font-size: 13px;\n  padding: 6px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: 20px;\n  border: 1px solid var(--mj-brand-accent);\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n.filter-panel-header .close-btn {\n  background: transparent;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.filter-panel-header .close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.filter-panel-header .close-btn .fa-solid {\n  font-size: 14px;\n}\n\n/* Content Area */\n.filter-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 20px;\n}\n\n/* Filter Groups */\n.filter-group {\n  margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.75px;\n}\n\n.filter-group .filter-label .fa-solid {\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.filter-group .filter-input,\n.filter-group .filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select: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) 15%, transparent);\n}\n\n.filter-group .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-group .filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Legacy support for non-scoped selectors */\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input:focus,\n.filter-select: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) 15%, transparent);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.filter-select {\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  padding-right: 36px;\n}\n\n/* Rank Filter */\n.rank-filter-inputs {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  margin-top: 8px;\n}\n\n.rank-input {\n  width: 70px;\n  padding: 10px 12px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 14px;\n  text-align: center;\n  background: var(--mj-bg-surface);\n  transition: all 0.3s;\n  box-sizing: border-box;\n  -moz-appearance: textfield;\n}\n\n.rank-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.rank-input::placeholder {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.rank-input::-webkit-inner-spin-button,\n.rank-input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.rank-separator {\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Filter Actions */\n.filter-actions {\n  margin-top: 28px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions .reset-btn {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions .reset-btn .fa-solid {\n  font-size: 13px;\n}\n\n/* Scrollbar Styling */\n.filter-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.filter-content::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: var(--mj-text-muted);\n  padding: 60px 32px;\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  opacity: 1;\n}\n\n.empty-state h3 {\n  margin: 0 0 12px 0;\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.empty-state p {\n  margin: 0 0 32px 0;\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n}\n\n/* Grid View */\n.model-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.model-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.model-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.model-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.model-card:hover::before {\n  opacity: 1;\n}\n\n.model-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.model-card.expanded::before {\n  opacity: 1;\n}\n\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.model-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.model-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.model-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.model-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.model-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.model-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.model-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.model-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.model-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.model-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.data-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.data-table thead {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table thead tr {\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.data-table thead th {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.data-table thead th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.data-table thead th:last-child,\n.data-table thead th:nth-last-child(2) {\n  cursor: default;\n}\n\n.data-table thead th:last-child:hover,\n.data-table thead th:nth-last-child(2):hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.data-table thead th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.data-table thead th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.data-table .sort-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.data-table .sort-icon {\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.2s ease;\n}\n\n.data-table thead th:hover .sort-icon {\n  opacity: 0.5;\n}\n\n.data-table thead th.sorted .sort-icon {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n.data-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s ease;\n}\n\n.data-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.data-table tbody tr:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.data-table tbody td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.name-cell {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.name-cell i {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n/* Rank Badge */\n.rank-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.rank-badge.rank-high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.rank-badge.rank-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.rank-badge.rank-low {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.rank-badge.rank-none {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.status-badge.active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.inactive {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .model-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .model-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n/* ============================================\n   Detail Panel - Slide-in Panel\n   ============================================ */\n\n/* Detail Panel Overlay */\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  opacity: 0;\n  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n@keyframes fadeIn {\n  to {\n    opacity: 1;\n  }\n}\n\n/* Detail Panel */\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  max-width: 90vw;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n/* Detail Section */\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-inactive {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-section-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n/* Detail Grid */\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-grid.single-column {\n  grid-template-columns: 1fr;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n.detail-value.muted {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n/* Status Badges in Detail Panel */\n.detail-section .status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.detail-section .status-badge.active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.detail-section .status-badge.inactive {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  padding: 12px 24px;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: none;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n/* Responsive adjustments for detail panel */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-panel.visible {\n    right: 0;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n"] }]
     }], () => [{ type: i1.SharedService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModelManagementComponent, { className: "ModelManagementComponent", filePath: "src/AI/components/models/model-management.component.ts", lineNumber: 45 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModelManagementComponent, { className: "ModelManagementComponent", filePath: "src/AI/components/models/model-management.component.ts", lineNumber: 46 }); })();
 //# sourceMappingURL=model-management.component.js.map