npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.21.0 → 5.23.0 - Mend

@memberjunction/ng-core-entity-forms 5.21.0 → 5.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/dist/lib/custom/Lists/list-form.component.js CHANGED Viewed

@@ -13,13 +13,11 @@ import { MJListFormComponent } from '../../generated/Entities/MJList/mjlist.form
 import { Metadata, RunView, LogError, LogStatus } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@progress/kendo-angular-dialog";
-import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@memberjunction/ng-base-forms";
-import * as i6 from "@memberjunction/ng-shared-generic";
-import * as i7 from "@memberjunction/ng-list-management";
-import * as i8 from "@angular/common";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-base-forms";
+import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i5 from "@memberjunction/ng-list-management";
+import * as i6 from "@angular/common";
 function MJListFormComponentExtended_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 25);
@@ -656,19 +654,16 @@ function MJListFormComponentExtended_Conditional_38_Conditional_2_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵproperty("text", "Adding " + ctx_r1.addTotal + " records to list...");
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 154);
-} }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 152);
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 153);
     i0.ɵɵelement(1, "mj-loading", 155);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("showText", false);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 153);
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 154);
     i0.ɵɵelement(1, "span", 156);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
@@ -678,42 +673,42 @@ function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_7_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("No records found matching \"", ctx_r1.addRecordsSearchFilter, "\"");
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 153);
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 154);
     i0.ɵɵelement(1, "span", 157);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Search for records to add to this list");
     i0.ɵɵelementEnd()();
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 165);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 169);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_3_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r26); return i0.ɵɵresetView($event.stopPropagation()); })("change", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r26); const record_r25 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r25)); });
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r26); return i0.ɵɵresetView($event.stopPropagation()); })("change", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r26); const record_r25 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r25)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const record_r25 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("checked", record_r25.isSelected);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 168);
     i0.ɵɵtext(1, "In List");
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 163);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Template_div_click_0_listener() { const record_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r25)); });
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Template_div_click_0_listener() { const record_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r25)); });
     i0.ɵɵelementStart(1, "div", 164);
-    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_2_Template, 1, 0, "span", 165);
-    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_3_Template, 1, 1, "input", 166);
+    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_2_Template, 1, 0, "span", 165);
+    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template, 1, 1, "input", 166);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 167);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Conditional_6_Template, 2, 0, "span", 168);
+    i0.ɵɵconditionalCreate(6, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_6_Template, 2, 0, "span", 168);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const record_r25 = ctx.$implicit;
@@ -727,21 +722,21 @@ function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_
     i0.ɵɵadvance();
     i0.ɵɵconditional(record_r25.isInList ? 6 : -1);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 158)(1, "button", 159);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectAllAddable()); });
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectAllAddable()); });
     i0.ɵɵtext(2, "Select All");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "button", 159);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deselectAllAddable()); });
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deselectAllAddable()); });
     i0.ɵɵtext(4, "Deselect All");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span", 160);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 161);
-    i0.ɵɵrepeaterCreate(8, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_For_9_Template, 7, 8, "div", 162, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(8, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Template, 7, 8, "div", 162, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -752,41 +747,44 @@ function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_
 } }
 function MJListFormComponentExtended_Conditional_38_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 147)(1, "kendo-textbox", 148);
-    i0.ɵɵlistener("valueChange", function MJListFormComponentExtended_Conditional_38_Conditional_3_Template_kendo_textbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddRecordsSearchChange($event)); });
-    i0.ɵɵtemplate(2, MJListFormComponentExtended_Conditional_38_Conditional_3_ng_template_2_Template, 1, 0, "ng-template", 149);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 150);
-    i0.ɵɵtext(4, "Type at least 2 characters to search");
+    i0.ɵɵelementStart(0, "div", 147)(1, "div", 148);
+    i0.ɵɵelement(2, "span", 149);
+    i0.ɵɵelementStart(3, "input", 150);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_38_Conditional_3_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.addRecordsSearchFilter, $event) || (ctx_r1.addRecordsSearchFilter = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function MJListFormComponentExtended_Conditional_38_Conditional_3_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddRecordsSearchChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 151);
-    i0.ɵɵconditionalCreate(6, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_6_Template, 2, 1, "div", 152);
-    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_7_Template, 4, 1, "div", 153);
-    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_8_Template, 4, 0, "div", 153);
-    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template, 10, 1);
+    i0.ɵɵelementStart(4, "span", 151);
+    i0.ɵɵtext(5, "Type at least 2 characters to search");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 152);
+    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_7_Template, 2, 1, "div", 153);
+    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_8_Template, 4, 1, "div", 154);
+    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template, 4, 0, "div", 154);
+    i0.ɵɵconditionalCreate(10, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template, 10, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("placeholder", "Search " + ctx_r1.entityDisplayName + "...");
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.addRecordsSearchFilter);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.addDialogLoading ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("placeholder", "Search " + ctx_r1.entityDisplayName + "...")("clearButton", true)("value", ctx_r1.addRecordsSearchFilter);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.addDialogLoading ? 6 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.addDialogLoading && ctx_r1.addableRecords.length === 0 && ctx_r1.addRecordsSearchFilter.length >= 2 ? 7 : -1);
+    i0.ɵɵconditional(!ctx_r1.addDialogLoading && ctx_r1.addableRecords.length === 0 && ctx_r1.addRecordsSearchFilter.length >= 2 ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.addDialogLoading && ctx_r1.addableRecords.length === 0 && ctx_r1.addRecordsSearchFilter.length < 2 ? 8 : -1);
+    i0.ɵɵconditional(!ctx_r1.addDialogLoading && ctx_r1.addableRecords.length === 0 && ctx_r1.addRecordsSearchFilter.length < 2 ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.addDialogLoading && ctx_r1.addableRecords.length > 0 ? 9 : -1);
+    i0.ɵɵconditional(!ctx_r1.addDialogLoading && ctx_r1.addableRecords.length > 0 ? 10 : -1);
 } }
 function MJListFormComponentExtended_Conditional_38_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 141);
-    i0.ɵɵlistener("close", function MJListFormComponentExtended_Conditional_38_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵelementStart(0, "mj-dialog", 141);
+    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_38_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
     i0.ɵɵelementStart(1, "div", 142);
     i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_38_Conditional_2_Template, 2, 1, "div", 143);
-    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_38_Conditional_3_Template, 10, 7);
+    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_38_Conditional_3_Template, 11, 6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "kendo-dialog-actions")(5, "button", 144);
+    i0.ɵɵelementStart(4, "mj-dialog-actions")(5, "button", 144);
     i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddRecords()); });
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
@@ -796,7 +794,7 @@ function MJListFormComponentExtended_Conditional_38_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", "Add " + ctx_r1.entityDisplayName + " to List")("minWidth", 400)("width", 600)("height", 550);
+    i0.ɵɵproperty("Title", "Add " + ctx_r1.entityDisplayName + " to List")("Visible", ctx_r1.showAddRecordsDialog)("MinWidth", 400)("Width", 600)("Height", 550);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.addDialogSaving ? 2 : -1);
     i0.ɵɵadvance();
@@ -828,7 +826,7 @@ function MJListFormComponentExtended_Conditional_39_Conditional_4_Template(rf, c
     i0.ɵɵelementEnd();
 } }
 function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 153);
+    i0.ɵɵelementStart(0, "div", 154);
     i0.ɵɵelement(1, "span", 176);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No saved views found for this entity");
@@ -865,7 +863,7 @@ function MJListFormComponentExtended_Conditional_39_Conditional_5_Template(rf, c
     i0.ɵɵtext(1, "Select views to add their records to this list:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "div", 175);
-    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_3_Template, 4, 0, "div", 153);
+    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_3_Template, 4, 0, "div", 154);
     i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -877,15 +875,15 @@ function MJListFormComponentExtended_Conditional_39_Conditional_5_Template(rf, c
 } }
 function MJListFormComponentExtended_Conditional_39_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 170);
-    i0.ɵɵlistener("close", function MJListFormComponentExtended_Conditional_39_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵelementStart(0, "mj-dialog", 170);
+    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_39_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
     i0.ɵɵelementStart(1, "div", 171);
     i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_39_Conditional_2_Template, 2, 0, "div", 143);
     i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_39_Conditional_3_Template, 2, 1, "div", 143);
     i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_39_Conditional_4_Template, 2, 0, "div", 143);
     i0.ɵɵconditionalCreate(5, MJListFormComponentExtended_Conditional_39_Conditional_5_Template, 5, 2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 144);
+    i0.ɵɵelementStart(6, "mj-dialog-actions")(7, "button", 144);
     i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddFromView()); });
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
@@ -895,7 +893,7 @@ function MJListFormComponentExtended_Conditional_39_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("minWidth", 400)("width", 600)("height", 500);
+    i0.ɵɵproperty("Visible", ctx_r1.showAddFromViewDialog)("MinWidth", 400)("Width", 600)("Height", 500);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.showAddFromViewLoader && ctx_r1.fetchingRecordsToSave ? 2 : -1);
     i0.ɵɵadvance();
@@ -1602,7 +1600,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
         this.cdr.markForCheck();
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJListFormComponentExtended_BaseFactory; return function MJListFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJListFormComponentExtended_BaseFactory || (ɵMJListFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJListFormComponentExtended)))(__ngFactoryType__ || MJListFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJListFormComponentExtended, selectors: [["mj-list-form-extended"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 41, vars: 20, consts: [["nameInput", ""], [1, "list-form-explorer"], [1, "list-header"], [1, "header-content"], [1, "header-icon"], [1, "header-info"], [1, "name-row"], [1, "entity-badge"], [1, "header-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "nav-rail"], [1, "nav-item", 3, "active", "disabled", "title"], [1, "main-content"], [1, "section", "overview-section"], [1, "section", "items-section"], [1, "section", "sharing-section"], [1, "section", "activity-section"], [1, "section", "settings-section"], [3, "title", "minWidth", "width", "height"], ["title", "Add Records from Views", 3, "minWidth", "width", "height"], [3, "config", "visible"], [1, "list-name"], ["title", "Edit name", 1, "edit-btn"], ["title", "Edit name", 1, "edit-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "text", 1, "inline-edit-input", "name-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "ngModel"], [1, "save-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "cancel-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "overview-grid"], [1, "overview-card", "description-card"], [1, "card-header"], [1, "fa-solid", "fa-align-left"], [1, "edit-btn"], [1, "card-body"], [1, "overview-card", "details-card"], [1, "fa-solid", "fa-info-circle"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "detail-icon"], [1, "category-select", 3, "ngModel"], [1, "fa-solid", "fa-user", "detail-icon"], [1, "owner-badge"], [1, "fa-solid", "fa-calendar", "detail-icon"], [1, "overview-card", "actions-card"], [1, "fa-solid", "fa-bolt"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "action-count"], [1, "action-btn"], ["title", "Coming soon", 1, "action-btn", 3, "disabled"], [1, "fa-solid", "fa-file-export"], [1, "coming-soon"], [1, "edit-btn", 3, "click"], [1, "description-text"], [1, "description-empty"], ["placeholder", "Add a description...", "rows", "3", 1, "inline-edit-input", "description-input", 3, "ngModelChange", "keydown.escape", "ngModel"], [1, "edit-actions"], [1, "btn-primary", 3, "click"], [1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-folder", "detail-icon"], [1, "category-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "fa-solid", "fa-share-nodes"], [1, "section-header"], [1, "section-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search items...", 3, "ngModelChange", "ngModel"], [1, "add-buttons"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-state"], [1, "empty-state"], [1, "items-table-container"], ["title", "Add individual records", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Add records from a saved view", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-table-list"], ["text", "Loading items...", "size", "medium"], [1, "empty-icon"], [1, "fa-solid", "fa-inbox"], [1, "items-toolbar"], [1, "items-table"], [1, "col-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "col-name"], [1, "col-id"], [1, "col-added"], [1, "col-actions"], [3, "selected"], [1, "items-footer"], [1, "items-count"], [1, "selection-count"], [1, "btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "item-name"], [1, "item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "record-id"], ["title", "Open record", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "sharing-summary"], [1, "readonly-notice"], [1, "fa-solid", "fa-user-plus"], [1, "summary-card"], [1, "summary-icon"], [1, "fa-solid", "fa-users"], [1, "summary-content"], [1, "summary-value"], [1, "summary-label"], [1, "summary-icon", "pending"], [1, "fa-solid", "fa-envelope"], [1, "btn-primary"], [1, "activity-timeline"], [1, "timeline-item"], [1, "timeline-icon"], [1, "fa-solid", "fa-edit"], [1, "timeline-content"], [1, "timeline-text"], [1, "timeline-date"], [1, "timeline-icon", "create"], [1, "activity-info"], [1, "settings-form"], ["SectionKey", "listSettings", "SectionName", "List Settings", "Icon", "fa fa-cog", 3, "Form", "FormContext"], [1, "form-body"], ["FieldName", "Name", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Description", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "CategoryID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "systemInfo", "SectionName", "System Information", "Icon", "fa fa-info-circle", 3, "Form", "FormContext"], ["FieldName", "EntityID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "UserID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], [3, "close", "title", "minWidth", "width", "height"], [1, "dialog-content", "add-records-dialog"], [1, "dialog-loading"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", 3, "click", "disabled"], ["size", "small", 3, "text"], [1, "search-section"], [1, "search-input", 3, "valueChange", "placeholder", "clearButton", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "search-hint"], [1, "records-list"], [1, "list-loading"], [1, "empty-results"], [1, "fa-solid", "fa-search", "search-icon"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-list", "empty-icon"], [1, "selection-controls"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "selection-info"], [1, "records-scroll"], [1, "record-item", 3, "in-list", "selected"], [1, "record-item", 3, "click"], [1, "record-checkbox"], ["title", "Already in list", 1, "fa-solid", "fa-check", "in-list-icon"], ["type", "checkbox", 3, "checked"], [1, "record-name"], [1, "in-list-badge"], ["type", "checkbox", 3, "click", "change", "checked"], ["title", "Add Records from Views", 3, "close", "minWidth", "width", "height"], [1, "dialog-content"], ["text", "Loading records from views...", "size", "small"], ["text", "Loading views...", "size", "small"], [1, "dialog-instruction"], [1, "views-list"], [1, "fa-solid", "fa-folder-open", "empty-icon"], [1, "view-item", 3, "selected"], [1, "view-item", 3, "click"], [1, "fa-solid", "fa-table-list", "view-icon"], [1, "view-name"], [3, "complete", "cancel", "config", "visible"]], template: function MJListFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJListFormComponentExtended, selectors: [["mj-list-form-extended"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 41, vars: 20, consts: [["nameInput", ""], [1, "list-form-explorer"], [1, "list-header"], [1, "header-content"], [1, "header-icon"], [1, "header-info"], [1, "name-row"], [1, "entity-badge"], [1, "header-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "nav-rail"], [1, "nav-item", 3, "active", "disabled", "title"], [1, "main-content"], [1, "section", "overview-section"], [1, "section", "items-section"], [1, "section", "sharing-section"], [1, "section", "activity-section"], [1, "section", "settings-section"], [3, "Title", "Visible", "MinWidth", "Width", "Height"], ["Title", "Add Records from Views", 3, "Visible", "MinWidth", "Width", "Height"], [3, "config", "visible"], [1, "list-name"], ["title", "Edit name", 1, "edit-btn"], ["title", "Edit name", 1, "edit-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "text", 1, "inline-edit-input", "name-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "ngModel"], [1, "save-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "cancel-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "overview-grid"], [1, "overview-card", "description-card"], [1, "card-header"], [1, "fa-solid", "fa-align-left"], [1, "edit-btn"], [1, "card-body"], [1, "overview-card", "details-card"], [1, "fa-solid", "fa-info-circle"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "detail-icon"], [1, "category-select", 3, "ngModel"], [1, "fa-solid", "fa-user", "detail-icon"], [1, "owner-badge"], [1, "fa-solid", "fa-calendar", "detail-icon"], [1, "overview-card", "actions-card"], [1, "fa-solid", "fa-bolt"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "action-count"], [1, "action-btn"], ["title", "Coming soon", 1, "action-btn", 3, "disabled"], [1, "fa-solid", "fa-file-export"], [1, "coming-soon"], [1, "edit-btn", 3, "click"], [1, "description-text"], [1, "description-empty"], ["placeholder", "Add a description...", "rows", "3", 1, "inline-edit-input", "description-input", 3, "ngModelChange", "keydown.escape", "ngModel"], [1, "edit-actions"], [1, "btn-primary", 3, "click"], [1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-folder", "detail-icon"], [1, "category-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "fa-solid", "fa-share-nodes"], [1, "section-header"], [1, "section-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search items...", 3, "ngModelChange", "ngModel"], [1, "add-buttons"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-state"], [1, "empty-state"], [1, "items-table-container"], ["title", "Add individual records", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Add records from a saved view", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-table-list"], ["text", "Loading items...", "size", "medium"], [1, "empty-icon"], [1, "fa-solid", "fa-inbox"], [1, "items-toolbar"], [1, "items-table"], [1, "col-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "col-name"], [1, "col-id"], [1, "col-added"], [1, "col-actions"], [3, "selected"], [1, "items-footer"], [1, "items-count"], [1, "selection-count"], [1, "btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "item-name"], [1, "item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "record-id"], ["title", "Open record", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "sharing-summary"], [1, "readonly-notice"], [1, "fa-solid", "fa-user-plus"], [1, "summary-card"], [1, "summary-icon"], [1, "fa-solid", "fa-users"], [1, "summary-content"], [1, "summary-value"], [1, "summary-label"], [1, "summary-icon", "pending"], [1, "fa-solid", "fa-envelope"], [1, "btn-primary"], [1, "activity-timeline"], [1, "timeline-item"], [1, "timeline-icon"], [1, "fa-solid", "fa-edit"], [1, "timeline-content"], [1, "timeline-text"], [1, "timeline-date"], [1, "timeline-icon", "create"], [1, "activity-info"], [1, "settings-form"], ["SectionKey", "listSettings", "SectionName", "List Settings", "Icon", "fa fa-cog", 3, "Form", "FormContext"], [1, "form-body"], ["FieldName", "Name", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Description", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "CategoryID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "systemInfo", "SectionName", "System Information", "Icon", "fa fa-info-circle", 3, "Form", "FormContext"], ["FieldName", "EntityID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "UserID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], [3, "Close", "Title", "Visible", "MinWidth", "Width", "Height"], [1, "dialog-content", "add-records-dialog"], [1, "dialog-loading"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["mjButton", "", 3, "click", "disabled"], ["size", "small", 3, "text"], [1, "search-section"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "mj-input", "search-input", 3, "ngModelChange", "placeholder", "ngModel"], [1, "search-hint"], [1, "records-list"], [1, "list-loading"], [1, "empty-results"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-list", "empty-icon"], [1, "selection-controls"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "selection-info"], [1, "records-scroll"], [1, "record-item", 3, "in-list", "selected"], [1, "record-item", 3, "click"], [1, "record-checkbox"], ["title", "Already in list", 1, "fa-solid", "fa-check", "in-list-icon"], ["type", "checkbox", 3, "checked"], [1, "record-name"], [1, "in-list-badge"], ["type", "checkbox", 3, "click", "change", "checked"], ["Title", "Add Records from Views", 3, "Close", "Visible", "MinWidth", "Width", "Height"], [1, "dialog-content"], ["text", "Loading records from views...", "size", "small"], ["text", "Loading views...", "size", "small"], [1, "dialog-instruction"], [1, "views-list"], [1, "fa-solid", "fa-folder-open", "empty-icon"], [1, "view-item", 3, "selected"], [1, "view-item", 3, "click"], [1, "fa-solid", "fa-table-list", "view-icon"], [1, "view-name"], [3, "complete", "cancel", "config", "visible"]], template: function MJListFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "header", 2)(2, "div", 3)(3, "div", 4);
             i0.ɵɵelement(4, "i");
             i0.ɵɵelementEnd();
@@ -1643,8 +1641,8 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
             i0.ɵɵconditionalCreate(36, MJListFormComponentExtended_Conditional_36_Template, 26, 8, "section", 18);
             i0.ɵɵconditionalCreate(37, MJListFormComponentExtended_Conditional_37_Template, 16, 32, "section", 19);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(38, MJListFormComponentExtended_Conditional_38_Template, 9, 10, "kendo-dialog", 20);
-            i0.ɵɵconditionalCreate(39, MJListFormComponentExtended_Conditional_39_Template, 11, 11, "kendo-dialog", 21);
+            i0.ɵɵconditionalCreate(38, MJListFormComponentExtended_Conditional_38_Template, 9, 11, "mj-dialog", 20);
+            i0.ɵɵconditionalCreate(39, MJListFormComponentExtended_Conditional_39_Template, 11, 12, "mj-dialog", 21);
             i0.ɵɵconditionalCreate(40, MJListFormComponentExtended_Conditional_40_Template, 1, 2, "mj-list-share-dialog", 22);
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -1683,7 +1681,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
             i0.ɵɵconditional(ctx.showAddFromViewDialog ? 39 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showShareDialog && ctx.shareDialogConfig ? 40 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.DialogComponent, i2.DialogActionsComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i5.MjFormFieldComponent, i5.MjCollapsiblePanelComponent, i6.LoadingComponent, i7.ListShareDialogComponent, i8.DatePipe], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n\n.list-form-explorer[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.list-header[_ngcontent-%COMP%] {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn[_ngcontent-%COMP%], .cancel-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.save-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.nav-rail[_ngcontent-%COMP%] {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: white;\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled[_ngcontent-%COMP%] {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n.nav-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.overview-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select[_ngcontent-%COMP%] {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n\n\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    max-width: 400px;\n}\n\n.items-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.items-table[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.col-name[_ngcontent-%COMP%] {\n    width: 35%;\n}\n\n.col-id[_ngcontent-%COMP%] {\n    width: 25%;\n}\n\n.col-added[_ngcontent-%COMP%] {\n    width: 20%;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.record-id[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.items-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.coming-soon-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n.activity-timeline[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.timeline-text[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n\n\n.settings-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n.add-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.sharing-summary[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 16px 0;\n}\n\n.dialog-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction[_ngcontent-%COMP%] {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-list[_ngcontent-%COMP%] {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .list-loading[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 24px;\n    margin-bottom: 12px;\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-info[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-scroll[_ngcontent-%COMP%] {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.in-list[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-checkbox[_ngcontent-%COMP%] {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n\n\n.views-list[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.views-list[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.views-list[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.view-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.view-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.view-item[_ngcontent-%COMP%]   .view-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n\n\n@media (max-width: 1024px) {\n    .list-form-explorer[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item[_ngcontent-%COMP%]::before {\n        display: none;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .section-actions[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}", ".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent, i3.MjFormFieldComponent, i3.MjCollapsiblePanelComponent, i4.LoadingComponent, i5.ListShareDialogComponent, i6.DatePipe], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n\n.list-form-explorer[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.list-header[_ngcontent-%COMP%] {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn[_ngcontent-%COMP%], .cancel-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.save-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.nav-rail[_ngcontent-%COMP%] {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: white;\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled[_ngcontent-%COMP%] {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n.nav-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.overview-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select[_ngcontent-%COMP%] {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n\n\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    max-width: 400px;\n}\n\n.items-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.items-table[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.col-name[_ngcontent-%COMP%] {\n    width: 35%;\n}\n\n.col-id[_ngcontent-%COMP%] {\n    width: 25%;\n}\n\n.col-added[_ngcontent-%COMP%] {\n    width: 20%;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.record-id[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.items-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.coming-soon-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n.activity-timeline[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.timeline-text[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n\n\n.settings-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n.add-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.sharing-summary[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 16px 0;\n}\n\n.dialog-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction[_ngcontent-%COMP%] {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-list[_ngcontent-%COMP%] {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .list-loading[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 24px;\n    margin-bottom: 12px;\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-info[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-scroll[_ngcontent-%COMP%] {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.in-list[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-checkbox[_ngcontent-%COMP%] {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n\n\n.views-list[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.views-list[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.views-list[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.view-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.view-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.view-item[_ngcontent-%COMP%]   .view-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n\n\n@media (max-width: 1024px) {\n    .list-form-explorer[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item[_ngcontent-%COMP%]::before {\n        display: none;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .section-actions[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}", ".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
 };
 MJListFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Lists')
@@ -1691,7 +1689,7 @@ MJListFormComponentExtended = __decorate([
 export { MJListFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJListFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-list-form-extended', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- World-Class List Form -->\n<div class=\"list-form-explorer\">\n  <!-- Header -->\n  <header class=\"list-header\">\n    <div class=\"header-content\">\n      <div class=\"header-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n        <i [class]=\"entityIcon\"></i>\n      </div>\n      <div class=\"header-info\">\n        <div class=\"name-row\">\n          @if (!isEditingName) {\n            <h1 class=\"list-name\">{{record.Name || 'Untitled List'}}</h1>\n            @if (isCurrentUserOwner()) {\n              <button\n                class=\"edit-btn\"\n                (click)=\"startEditingName()\"\n                title=\"Edit name\"\n                >\n                <i class=\"fa-solid fa-pen\"></i>\n              </button>\n            }\n          }\n          @if (isEditingName) {\n            <input\n              type=\"text\"\n              class=\"inline-edit-input name-input\"\n              [(ngModel)]=\"editingName\"\n              (keydown.enter)=\"saveNameEdit()\"\n              (keydown.escape)=\"cancelNameEdit()\"\n              #nameInput />\n            <button class=\"save-btn\" (click)=\"saveNameEdit()\">\n              <i class=\"fa-solid fa-check\"></i>\n            </button>\n            <button class=\"cancel-btn\" (click)=\"cancelNameEdit()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <div class=\"entity-badge\">\n          <i [class]=\"entityIcon\"></i>\n          <span>{{entityDisplayName}}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-stats\">\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedItemCount}}</span>\n        <span class=\"stat-label\">Items</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{stats.shareCount}}</span>\n        <span class=\"stat-label\">Shares</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedLastUpdated}}</span>\n        <span class=\"stat-label\">Updated</span>\n      </div>\n    </div>\n  </header>\n\n  <!-- Navigation Rail -->\n  <nav class=\"nav-rail\">\n    @for (nav of navItems; track nav) {\n      <button\n        class=\"nav-item\"\n        [class.active]=\"activeSection === nav.id\"\n        [class.disabled]=\"nav.disabled\"\n        (click)=\"setActiveSection(nav.id)\"\n        [title]=\"nav.label\">\n        <i [class]=\"nav.icon\"></i>\n        <span class=\"nav-label\">{{nav.label}}</span>\n        @if (nav.badge && nav.badge > 0) {\n          <span class=\"nav-badge\">{{nav.badge}}</span>\n        }\n      </button>\n    }\n  </nav>\n\n  <!-- Main Content -->\n  <main class=\"main-content\">\n    <!-- Overview Section -->\n    @if (activeSection === 'overview') {\n      <section class=\"section overview-section\">\n        <div class=\"overview-grid\">\n          <!-- Description Card -->\n          <div class=\"overview-card description-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-align-left\"></i> Description</h3>\n              @if (isCurrentUserOwner() && !isEditingDescription) {\n                <button\n                  class=\"edit-btn\"\n                  (click)=\"startEditingDescription()\"\n                  >\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n            </div>\n            <div class=\"card-body\">\n              @if (!isEditingDescription) {\n                @if (record.Description) {\n                  <p class=\"description-text\">{{record.Description}}</p>\n                }\n                @if (!record.Description) {\n                  <p class=\"description-empty\">No description provided</p>\n                }\n              }\n              @if (isEditingDescription) {\n                <textarea\n                  class=\"inline-edit-input description-input\"\n                  [(ngModel)]=\"editingDescription\"\n                  placeholder=\"Add a description...\"\n                  rows=\"3\"\n                (keydown.escape)=\"cancelDescriptionEdit()\"></textarea>\n                <div class=\"edit-actions\">\n                  <button class=\"btn-primary\" (click)=\"saveDescriptionEdit()\">Save</button>\n                  <button class=\"btn-secondary\" (click)=\"cancelDescriptionEdit()\">Cancel</button>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Details Card -->\n          <div class=\"overview-card details-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-info-circle\"></i> Details</h3>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Entity</span>\n                <span class=\"detail-value\">\n                  <i [class]=\"entityIcon\" class=\"detail-icon\"></i>\n                  {{entityDisplayName}}\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Category</span>\n                @if (!isCurrentUserOwner()) {\n                  <span class=\"detail-value\">\n                    <i class=\"fa-solid fa-folder detail-icon\"></i>\n                    {{categoryName}}\n                  </span>\n                }\n                @if (isCurrentUserOwner()) {\n                  <select\n                    class=\"category-select\"\n                    [ngModel]=\"record.CategoryID\"\n                    (ngModelChange)=\"onCategoryChange($event)\">\n                    <option [ngValue]=\"null\">Uncategorized</option>\n                    @for (cat of categories; track cat) {\n                      <option [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                    }\n                  </select>\n                }\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Owner</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-user detail-icon\"></i>\n                  {{getOwnerName()}}\n                  @if (isCurrentUserOwner()) {\n                    <span class=\"owner-badge\">You</span>\n                  }\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-calendar detail-icon\"></i>\n                  {{record.__mj_CreatedAt | date:'mediumDate'}}\n                </span>\n              </div>\n            </div>\n          </div>\n          <!-- Quick Actions Card -->\n          <div class=\"overview-card actions-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-bolt\"></i> Quick Actions</h3>\n            </div>\n            <div class=\"card-body\">\n              <button class=\"action-btn\" (click)=\"setActiveSection('items')\">\n                <i class=\"fa-solid fa-list\"></i>\n                <span>View Items</span>\n                <span class=\"action-count\">{{stats.itemCount}}</span>\n              </button>\n              @if (isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"openShareDialog()\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>Share List</span>\n                  @if (stats.shareCount > 0) {\n                    <span class=\"action-count\">{{stats.shareCount}}</span>\n                  }\n                </button>\n              }\n              @if (!isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"setActiveSection('sharing')\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>View Sharing</span>\n                </button>\n              }\n              <button class=\"action-btn\" [disabled]=\"true\" title=\"Coming soon\">\n                <i class=\"fa-solid fa-file-export\"></i>\n                <span>Export Data</span>\n                <span class=\"coming-soon\">Soon</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n\n    <!-- Items Section -->\n    @if (activeSection === 'items') {\n      <section class=\"section items-section\">\n        <div class=\"section-header\">\n          <h2>List Items</h2>\n          <div class=\"section-actions\">\n            <div class=\"search-box\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search items...\"\n                [(ngModel)]=\"itemSearchTerm\" />\n            </div>\n            @if (isCurrentUserOwner()) {\n              <div class=\"add-buttons\">\n                <button class=\"btn-secondary\" (click)=\"openAddRecordsDialog()\" title=\"Add individual records\">\n                  <i class=\"fa-solid fa-plus\"></i> Add Records\n                </button>\n                <button class=\"btn-secondary\" (click)=\"openAddFromViewDialog()\" title=\"Add records from a saved view\">\n                  <i class=\"fa-solid fa-table-list\"></i> Add From View\n                </button>\n              </div>\n            }\n            <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n              <i class=\"fa-solid fa-refresh\"></i>\n            </button>\n          </div>\n        </div>\n        <!-- Loading State -->\n        @if (isLoadingItems) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!isLoadingItems && listItems.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-inbox\"></i>\n            </div>\n            <h3>No Items Yet</h3>\n            <p>This list doesn't have any items. Add records from the {{entityDisplayName}} entity.</p>\n          </div>\n        }\n        <!-- Items Table -->\n        @if (!isLoadingItems && listItems.length > 0) {\n          <div class=\"items-table-container\">\n            @if (selectedItems.size > 0) {\n              <div class=\"items-toolbar\">\n                <span class=\"selection-count\">{{selectedItems.size}} selected</span>\n                <button class=\"btn-danger\" (click)=\"removeSelectedItems()\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                  Remove from List\n                </button>\n              </div>\n            }\n            <table class=\"items-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelectAllChecked\"\n                      (change)=\"toggleSelectAll()\" />\n                  </th>\n                  <th class=\"col-name\">Name</th>\n                  <th class=\"col-id\">Record ID</th>\n                  <th class=\"col-added\">Added</th>\n                  <th class=\"col-actions\"></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (item of filteredItems; track item) {\n                  <tr\n                    [class.selected]=\"selectedItems.has(item.detail.ID)\">\n                    <td class=\"col-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"selectedItems.has(item.detail.ID)\"\n                        (change)=\"toggleItemSelection(item)\" />\n                    </td>\n                    <td class=\"col-name\">\n                      <div class=\"item-name\" [class.loading]=\"item.isLoading\">\n                        <i [class]=\"entityIcon\" class=\"item-icon\"></i>\n                        <span>{{item.recordName}}</span>\n                        @if (item.isLoading) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        }\n                      </div>\n                    </td>\n                    <td class=\"col-id\">\n                      <code class=\"record-id\">{{item.detail.RecordID}}</code>\n                    </td>\n                    <td class=\"col-added\">\n                      {{item.detail.__mj_CreatedAt | date:'shortDate'}}\n                    </td>\n                    <td class=\"col-actions\">\n                      <button\n                        class=\"btn-icon\"\n                        (click)=\"openRecord(item)\"\n                        title=\"Open record\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n            <div class=\"items-footer\">\n              <span class=\"items-count\">\n                Showing {{filteredItems.length}} of {{listItems.length}} items\n              </span>\n            </div>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Sharing Section -->\n    @if (activeSection === 'sharing') {\n      <section class=\"section sharing-section\">\n        <div class=\"section-header\">\n          <h2>Sharing</h2>\n          @if (isCurrentUserOwner()) {\n            <div class=\"section-actions\">\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Manage Sharing\n              </button>\n            </div>\n          }\n        </div>\n        <!-- Sharing summary -->\n        @if (stats.shareCount > 0 || stats.invitationCount > 0) {\n          <div class=\"sharing-summary\">\n            <div class=\"summary-card\">\n              <div class=\"summary-icon\">\n                <i class=\"fa-solid fa-users\"></i>\n              </div>\n              <div class=\"summary-content\">\n                <span class=\"summary-value\">{{stats.shareCount}}</span>\n                <span class=\"summary-label\">Active Share{{stats.shareCount !== 1 ? 's' : ''}}</span>\n              </div>\n            </div>\n            @if (stats.invitationCount > 0) {\n              <div class=\"summary-card\">\n                <div class=\"summary-icon pending\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                </div>\n                <div class=\"summary-content\">\n                  <span class=\"summary-value\">{{stats.invitationCount}}</span>\n                  <span class=\"summary-label\">Pending Invitation{{stats.invitationCount !== 1 ? 's' : ''}}</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty state for no shares -->\n        @if (stats.shareCount === 0 && stats.invitationCount === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-share-nodes\"></i>\n            </div>\n            <h3>Not Shared Yet</h3>\n            @if (isCurrentUserOwner()) {\n              <p>This list is private. Click \"Manage Sharing\" to share it with other users or roles.</p>\n            }\n            @if (!isCurrentUserOwner()) {\n              <p>This list hasn't been shared with anyone else.</p>\n            }\n            @if (isCurrentUserOwner()) {\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Share This List\n              </button>\n            }\n          </div>\n        }\n        <!-- Read-only notice for non-owners -->\n        @if (!isCurrentUserOwner() && (stats.shareCount > 0 || stats.invitationCount > 0)) {\n          <div class=\"readonly-notice\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Only the list owner can manage sharing settings.</span>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Activity Section -->\n    @if (activeSection === 'activity') {\n      <section class=\"section activity-section\">\n        <div class=\"section-header\">\n          <h2>Activity</h2>\n        </div>\n        <div class=\"activity-timeline\">\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List updated</p>\n              <span class=\"timeline-date\">{{record.__mj_UpdatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon create\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List created</p>\n              <span class=\"timeline-date\">{{record.__mj_CreatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"activity-info\">\n          <p>Detailed activity tracking coming soon. You'll be able to see who added items, when shares were created, and more.</p>\n        </div>\n      </section>\n    }\n\n    <!-- Settings Section -->\n    @if (activeSection === 'settings') {\n      <section class=\"section settings-section\">\n        <div class=\"section-header\">\n          <h2>Settings</h2>\n        </div>\n        <div class=\"settings-form\">\n          <mj-collapsible-panel\n            SectionKey=\"listSettings\"\n            SectionName=\"List Settings\"\n            Icon=\"fa fa-cog\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n                LinkComponentType=\"Search\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n          <mj-collapsible-panel\n            SectionKey=\"systemInfo\"\n            SectionName=\"System Information\"\n            Icon=\"fa fa-info-circle\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"EntityID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"UserID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_CreatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_UpdatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n        </div>\n      </section>\n    }\n  </main>\n</div>\n\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <kendo-dialog\n    [title]=\"'Add ' + entityDisplayName + ' to List'\"\n    (close)=\"closeAddRecordsDialog()\"\n    [minWidth]=\"400\"\n    [width]=\"600\"\n    [height]=\"550\">\n    <div class=\"dialog-content add-records-dialog\">\n      @if (addDialogSaving) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!addDialogSaving) {\n        <!-- Search Input -->\n        <div class=\"search-section\">\n          <kendo-textbox\n            [placeholder]=\"'Search ' + entityDisplayName + '...'\"\n            [clearButton]=\"true\"\n            (valueChange)=\"onAddRecordsSearchChange($event)\"\n            [value]=\"addRecordsSearchFilter\"\n            class=\"search-input\">\n            <ng-template kendoTextBoxPrefixTemplate>\n              <span class=\"fa-solid fa-search search-icon\"></span>\n            </ng-template>\n          </kendo-textbox>\n          <span class=\"search-hint\">Type at least 2 characters to search</span>\n        </div>\n        <!-- Records List -->\n        <div class=\"records-list\">\n          @if (addDialogLoading) {\n            <div class=\"list-loading\">\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length >= 2) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-search empty-icon\"></span>\n              <p>No records found matching \"{{ addRecordsSearchFilter }}\"</p>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length < 2) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-list empty-icon\"></span>\n              <p>Search for records to add to this list</p>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length > 0) {\n            <!-- Selection controls -->\n            <div class=\"selection-controls\">\n              <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"selectAllAddable()\">Select All</button>\n              <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"deselectAllAddable()\">Deselect All</button>\n              <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n            </div>\n            <!-- Records -->\n            <div class=\"records-scroll\">\n              @for (record of addableRecords; track record) {\n                <div class=\"record-item\"\n                  [class.in-list]=\"record.isInList\"\n                  [class.selected]=\"record.isSelected\"\n                  (click)=\"toggleRecordSelection(record)\">\n                  <div class=\"record-checkbox\">\n                    @if (record.isInList) {\n                      <span class=\"fa-solid fa-check in-list-icon\" title=\"Already in list\"></span>\n                    }\n                    @if (!record.isInList) {\n                      <input type=\"checkbox\"\n                        [checked]=\"record.isSelected\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"toggleRecordSelection(record)\">\n                    }\n                  </div>\n                  <div class=\"record-name\">{{ record.Name }}</div>\n                  @if (record.isInList) {\n                    <span class=\"in-list-badge\">In List</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton\n        (click)=\"confirmAddRecords()\"\n        [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n        themeColor=\"primary\">\n        Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n      </button>\n      <button kendoButton\n        (click)=\"closeAddRecordsDialog()\"\n        [disabled]=\"addDialogSaving\"\n        fillMode=\"outline\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <kendo-dialog\n    title=\"Add Records from Views\"\n    (close)=\"closeAddFromViewDialog()\"\n    [minWidth]=\"400\"\n    [width]=\"600\"\n    [height]=\"500\">\n    <div class=\"dialog-content\">\n      @if (showAddFromViewLoader && fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && addFromViewTotal > 0 && !fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addFromViewTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && !fetchingRecordsToSave && addFromViewTotal === 0) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!showAddFromViewLoader) {\n        <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n        <div class=\"views-list\">\n          @if (!userViews || userViews.length === 0) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-folder-open empty-icon\"></span>\n              <p>No saved views found for this entity</p>\n            </div>\n          }\n          @if (userViews && userViews.length > 0) {\n            @for (view of userViews; track view) {\n              <div class=\"view-item\"\n                [class.selected]=\"isViewSelected(view)\"\n                (click)=\"toggleViewSelection(view)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isViewSelected(view)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleViewSelection(view)\">\n                <span class=\"fa-solid fa-table-list view-icon\"></span>\n                <span class=\"view-name\">{{ view.Name }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton\n        (click)=\"confirmAddFromView()\"\n        [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n        themeColor=\"primary\">\n        Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n      </button>\n      <button kendoButton\n        (click)=\"closeAddFromViewDialog()\"\n        [disabled]=\"showAddFromViewLoader\"\n        fillMode=\"outline\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n<!-- Share Dialog -->\n@if (showShareDialog && shareDialogConfig) {\n  <mj-list-share-dialog\n    [config]=\"shareDialogConfig\"\n    [visible]=\"showShareDialog\"\n    (complete)=\"onShareDialogComplete($event)\"\n    (cancel)=\"onShareDialogCancel()\">\n  </mj-list-share-dialog>\n}\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\n   ============================================ */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Layout */\n.list-form-explorer {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Header */\n.list-header {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn, .cancel-btn {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn {\n    color: var(--mj-status-success);\n}\n\n.save-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge i {\n    font-size: 12px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Navigation Rail */\n.nav-rail {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: white;\n}\n\n.nav-item.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item i {\n    font-size: 18px;\n}\n\n.nav-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Main Content */\n.main-content {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section {\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Overview Section */\n.overview-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: var(--mj-text-disabled);\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n/* Details Card */\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n/* Actions Card */\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn i {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn span:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* Items Section */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state h3 {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: var(--mj-text-primary);\n}\n\n.empty-state p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    max-width: 400px;\n}\n\n.items-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table th {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table tr:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox {\n    width: 40px;\n}\n\n.col-name {\n    width: 35%;\n}\n\n.col-id {\n    width: 25%;\n}\n\n.col-added {\n    width: 20%;\n}\n\n.col-actions {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon {\n    color: var(--mj-text-disabled);\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.items-count {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Activity Section */\n.activity-timeline {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n/* Settings Section */\n.settings-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Add Buttons in Items Section */\n.add-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons .btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Sharing Summary */\n.sharing-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice i {\n    color: var(--mj-text-disabled);\n}\n\n/* Dialog Styles */\n.dialog-content {\n    padding: 16px 0;\n}\n\n.dialog-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n/* Add Records Dialog */\n.add-records-dialog .search-section {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog .search-input {\n    width: 100%;\n}\n\n.add-records-dialog .search-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog .records-list {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog .list-loading {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog .empty-results .empty-icon {\n    width: 48px;\n    height: 48px;\n    font-size: 24px;\n    margin-bottom: 12px;\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog .selection-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog .selection-info {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog .records-scroll {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog .record-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog .record-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog .record-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog .record-item.in-list {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog .record-checkbox {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog .in-list-icon {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog .record-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog .in-list-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n/* Add From View Dialog */\n.views-list {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.views-list .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.views-list .empty-results .empty-icon {\n    font-size: 36px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.view-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item:last-child {\n    border-bottom: none;\n}\n\n.view-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item .view-icon {\n    color: var(--mj-brand-primary);\n}\n\n.view-item .view-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .list-form-explorer {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item::before {\n        display: none;\n    }\n\n    .header-stats {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box input {\n        width: 100%;\n    }\n\n    .section-actions {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}\n", ".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-list-form-extended', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- World-Class List Form -->\n<div class=\"list-form-explorer\">\n  <!-- Header -->\n  <header class=\"list-header\">\n    <div class=\"header-content\">\n      <div class=\"header-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n        <i [class]=\"entityIcon\"></i>\n      </div>\n      <div class=\"header-info\">\n        <div class=\"name-row\">\n          @if (!isEditingName) {\n            <h1 class=\"list-name\">{{record.Name || 'Untitled List'}}</h1>\n            @if (isCurrentUserOwner()) {\n              <button\n                class=\"edit-btn\"\n                (click)=\"startEditingName()\"\n                title=\"Edit name\"\n                >\n                <i class=\"fa-solid fa-pen\"></i>\n              </button>\n            }\n          }\n          @if (isEditingName) {\n            <input\n              type=\"text\"\n              class=\"inline-edit-input name-input\"\n              [(ngModel)]=\"editingName\"\n              (keydown.enter)=\"saveNameEdit()\"\n              (keydown.escape)=\"cancelNameEdit()\"\n              #nameInput />\n            <button class=\"save-btn\" (click)=\"saveNameEdit()\">\n              <i class=\"fa-solid fa-check\"></i>\n            </button>\n            <button class=\"cancel-btn\" (click)=\"cancelNameEdit()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <div class=\"entity-badge\">\n          <i [class]=\"entityIcon\"></i>\n          <span>{{entityDisplayName}}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-stats\">\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedItemCount}}</span>\n        <span class=\"stat-label\">Items</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{stats.shareCount}}</span>\n        <span class=\"stat-label\">Shares</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedLastUpdated}}</span>\n        <span class=\"stat-label\">Updated</span>\n      </div>\n    </div>\n  </header>\n\n  <!-- Navigation Rail -->\n  <nav class=\"nav-rail\">\n    @for (nav of navItems; track nav) {\n      <button\n        class=\"nav-item\"\n        [class.active]=\"activeSection === nav.id\"\n        [class.disabled]=\"nav.disabled\"\n        (click)=\"setActiveSection(nav.id)\"\n        [title]=\"nav.label\">\n        <i [class]=\"nav.icon\"></i>\n        <span class=\"nav-label\">{{nav.label}}</span>\n        @if (nav.badge && nav.badge > 0) {\n          <span class=\"nav-badge\">{{nav.badge}}</span>\n        }\n      </button>\n    }\n  </nav>\n\n  <!-- Main Content -->\n  <main class=\"main-content\">\n    <!-- Overview Section -->\n    @if (activeSection === 'overview') {\n      <section class=\"section overview-section\">\n        <div class=\"overview-grid\">\n          <!-- Description Card -->\n          <div class=\"overview-card description-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-align-left\"></i> Description</h3>\n              @if (isCurrentUserOwner() && !isEditingDescription) {\n                <button\n                  class=\"edit-btn\"\n                  (click)=\"startEditingDescription()\"\n                  >\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n            </div>\n            <div class=\"card-body\">\n              @if (!isEditingDescription) {\n                @if (record.Description) {\n                  <p class=\"description-text\">{{record.Description}}</p>\n                }\n                @if (!record.Description) {\n                  <p class=\"description-empty\">No description provided</p>\n                }\n              }\n              @if (isEditingDescription) {\n                <textarea\n                  class=\"inline-edit-input description-input\"\n                  [(ngModel)]=\"editingDescription\"\n                  placeholder=\"Add a description...\"\n                  rows=\"3\"\n                (keydown.escape)=\"cancelDescriptionEdit()\"></textarea>\n                <div class=\"edit-actions\">\n                  <button class=\"btn-primary\" (click)=\"saveDescriptionEdit()\">Save</button>\n                  <button class=\"btn-secondary\" (click)=\"cancelDescriptionEdit()\">Cancel</button>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Details Card -->\n          <div class=\"overview-card details-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-info-circle\"></i> Details</h3>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Entity</span>\n                <span class=\"detail-value\">\n                  <i [class]=\"entityIcon\" class=\"detail-icon\"></i>\n                  {{entityDisplayName}}\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Category</span>\n                @if (!isCurrentUserOwner()) {\n                  <span class=\"detail-value\">\n                    <i class=\"fa-solid fa-folder detail-icon\"></i>\n                    {{categoryName}}\n                  </span>\n                }\n                @if (isCurrentUserOwner()) {\n                  <select\n                    class=\"category-select\"\n                    [ngModel]=\"record.CategoryID\"\n                    (ngModelChange)=\"onCategoryChange($event)\">\n                    <option [ngValue]=\"null\">Uncategorized</option>\n                    @for (cat of categories; track cat) {\n                      <option [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                    }\n                  </select>\n                }\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Owner</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-user detail-icon\"></i>\n                  {{getOwnerName()}}\n                  @if (isCurrentUserOwner()) {\n                    <span class=\"owner-badge\">You</span>\n                  }\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-calendar detail-icon\"></i>\n                  {{record.__mj_CreatedAt | date:'mediumDate'}}\n                </span>\n              </div>\n            </div>\n          </div>\n          <!-- Quick Actions Card -->\n          <div class=\"overview-card actions-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-bolt\"></i> Quick Actions</h3>\n            </div>\n            <div class=\"card-body\">\n              <button class=\"action-btn\" (click)=\"setActiveSection('items')\">\n                <i class=\"fa-solid fa-list\"></i>\n                <span>View Items</span>\n                <span class=\"action-count\">{{stats.itemCount}}</span>\n              </button>\n              @if (isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"openShareDialog()\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>Share List</span>\n                  @if (stats.shareCount > 0) {\n                    <span class=\"action-count\">{{stats.shareCount}}</span>\n                  }\n                </button>\n              }\n              @if (!isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"setActiveSection('sharing')\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>View Sharing</span>\n                </button>\n              }\n              <button class=\"action-btn\" [disabled]=\"true\" title=\"Coming soon\">\n                <i class=\"fa-solid fa-file-export\"></i>\n                <span>Export Data</span>\n                <span class=\"coming-soon\">Soon</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n\n    <!-- Items Section -->\n    @if (activeSection === 'items') {\n      <section class=\"section items-section\">\n        <div class=\"section-header\">\n          <h2>List Items</h2>\n          <div class=\"section-actions\">\n            <div class=\"search-box\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search items...\"\n                [(ngModel)]=\"itemSearchTerm\" />\n            </div>\n            @if (isCurrentUserOwner()) {\n              <div class=\"add-buttons\">\n                <button class=\"btn-secondary\" (click)=\"openAddRecordsDialog()\" title=\"Add individual records\">\n                  <i class=\"fa-solid fa-plus\"></i> Add Records\n                </button>\n                <button class=\"btn-secondary\" (click)=\"openAddFromViewDialog()\" title=\"Add records from a saved view\">\n                  <i class=\"fa-solid fa-table-list\"></i> Add From View\n                </button>\n              </div>\n            }\n            <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n              <i class=\"fa-solid fa-refresh\"></i>\n            </button>\n          </div>\n        </div>\n        <!-- Loading State -->\n        @if (isLoadingItems) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!isLoadingItems && listItems.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-inbox\"></i>\n            </div>\n            <h3>No Items Yet</h3>\n            <p>This list doesn't have any items. Add records from the {{entityDisplayName}} entity.</p>\n          </div>\n        }\n        <!-- Items Table -->\n        @if (!isLoadingItems && listItems.length > 0) {\n          <div class=\"items-table-container\">\n            @if (selectedItems.size > 0) {\n              <div class=\"items-toolbar\">\n                <span class=\"selection-count\">{{selectedItems.size}} selected</span>\n                <button class=\"btn-danger\" (click)=\"removeSelectedItems()\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                  Remove from List\n                </button>\n              </div>\n            }\n            <table class=\"items-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelectAllChecked\"\n                      (change)=\"toggleSelectAll()\" />\n                  </th>\n                  <th class=\"col-name\">Name</th>\n                  <th class=\"col-id\">Record ID</th>\n                  <th class=\"col-added\">Added</th>\n                  <th class=\"col-actions\"></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (item of filteredItems; track item) {\n                  <tr\n                    [class.selected]=\"selectedItems.has(item.detail.ID)\">\n                    <td class=\"col-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"selectedItems.has(item.detail.ID)\"\n                        (change)=\"toggleItemSelection(item)\" />\n                    </td>\n                    <td class=\"col-name\">\n                      <div class=\"item-name\" [class.loading]=\"item.isLoading\">\n                        <i [class]=\"entityIcon\" class=\"item-icon\"></i>\n                        <span>{{item.recordName}}</span>\n                        @if (item.isLoading) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        }\n                      </div>\n                    </td>\n                    <td class=\"col-id\">\n                      <code class=\"record-id\">{{item.detail.RecordID}}</code>\n                    </td>\n                    <td class=\"col-added\">\n                      {{item.detail.__mj_CreatedAt | date:'shortDate'}}\n                    </td>\n                    <td class=\"col-actions\">\n                      <button\n                        class=\"btn-icon\"\n                        (click)=\"openRecord(item)\"\n                        title=\"Open record\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n            <div class=\"items-footer\">\n              <span class=\"items-count\">\n                Showing {{filteredItems.length}} of {{listItems.length}} items\n              </span>\n            </div>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Sharing Section -->\n    @if (activeSection === 'sharing') {\n      <section class=\"section sharing-section\">\n        <div class=\"section-header\">\n          <h2>Sharing</h2>\n          @if (isCurrentUserOwner()) {\n            <div class=\"section-actions\">\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Manage Sharing\n              </button>\n            </div>\n          }\n        </div>\n        <!-- Sharing summary -->\n        @if (stats.shareCount > 0 || stats.invitationCount > 0) {\n          <div class=\"sharing-summary\">\n            <div class=\"summary-card\">\n              <div class=\"summary-icon\">\n                <i class=\"fa-solid fa-users\"></i>\n              </div>\n              <div class=\"summary-content\">\n                <span class=\"summary-value\">{{stats.shareCount}}</span>\n                <span class=\"summary-label\">Active Share{{stats.shareCount !== 1 ? 's' : ''}}</span>\n              </div>\n            </div>\n            @if (stats.invitationCount > 0) {\n              <div class=\"summary-card\">\n                <div class=\"summary-icon pending\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                </div>\n                <div class=\"summary-content\">\n                  <span class=\"summary-value\">{{stats.invitationCount}}</span>\n                  <span class=\"summary-label\">Pending Invitation{{stats.invitationCount !== 1 ? 's' : ''}}</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty state for no shares -->\n        @if (stats.shareCount === 0 && stats.invitationCount === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-share-nodes\"></i>\n            </div>\n            <h3>Not Shared Yet</h3>\n            @if (isCurrentUserOwner()) {\n              <p>This list is private. Click \"Manage Sharing\" to share it with other users or roles.</p>\n            }\n            @if (!isCurrentUserOwner()) {\n              <p>This list hasn't been shared with anyone else.</p>\n            }\n            @if (isCurrentUserOwner()) {\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Share This List\n              </button>\n            }\n          </div>\n        }\n        <!-- Read-only notice for non-owners -->\n        @if (!isCurrentUserOwner() && (stats.shareCount > 0 || stats.invitationCount > 0)) {\n          <div class=\"readonly-notice\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Only the list owner can manage sharing settings.</span>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Activity Section -->\n    @if (activeSection === 'activity') {\n      <section class=\"section activity-section\">\n        <div class=\"section-header\">\n          <h2>Activity</h2>\n        </div>\n        <div class=\"activity-timeline\">\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List updated</p>\n              <span class=\"timeline-date\">{{record.__mj_UpdatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon create\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List created</p>\n              <span class=\"timeline-date\">{{record.__mj_CreatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"activity-info\">\n          <p>Detailed activity tracking coming soon. You'll be able to see who added items, when shares were created, and more.</p>\n        </div>\n      </section>\n    }\n\n    <!-- Settings Section -->\n    @if (activeSection === 'settings') {\n      <section class=\"section settings-section\">\n        <div class=\"section-header\">\n          <h2>Settings</h2>\n        </div>\n        <div class=\"settings-form\">\n          <mj-collapsible-panel\n            SectionKey=\"listSettings\"\n            SectionName=\"List Settings\"\n            Icon=\"fa fa-cog\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n                LinkComponentType=\"Search\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n          <mj-collapsible-panel\n            SectionKey=\"systemInfo\"\n            SectionName=\"System Information\"\n            Icon=\"fa fa-info-circle\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"EntityID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"UserID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_CreatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_UpdatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n        </div>\n      </section>\n    }\n  </main>\n</div>\n\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <mj-dialog\n    [Title]=\"'Add ' + entityDisplayName + ' to List'\"\n    (Close)=\"closeAddRecordsDialog()\"\n    [Visible]=\"showAddRecordsDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"550\">\n    <div class=\"dialog-content add-records-dialog\">\n      @if (addDialogSaving) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!addDialogSaving) {\n        <!-- Search Input -->\n        <div class=\"search-section\">\n          <div class=\"search-input-wrapper\">\n            <span class=\"fa-solid fa-search search-icon\"></span>\n            <input\n              type=\"text\"\n              class=\"mj-input search-input\"\n              [placeholder]=\"'Search ' + entityDisplayName + '...'\"\n              [(ngModel)]=\"addRecordsSearchFilter\"\n              (ngModelChange)=\"onAddRecordsSearchChange($event)\" />\n          </div>\n          <span class=\"search-hint\">Type at least 2 characters to search</span>\n        </div>\n        <!-- Records List -->\n        <div class=\"records-list\">\n          @if (addDialogLoading) {\n            <div class=\"list-loading\">\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length >= 2) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-search empty-icon\"></span>\n              <p>No records found matching \"{{ addRecordsSearchFilter }}\"</p>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length < 2) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-list empty-icon\"></span>\n              <p>Search for records to add to this list</p>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length > 0) {\n            <!-- Selection controls -->\n            <div class=\"selection-controls\">\n              <button mjButton variant=\"flat\" (click)=\"selectAllAddable()\">Select All</button>\n              <button mjButton variant=\"flat\" (click)=\"deselectAllAddable()\">Deselect All</button>\n              <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n            </div>\n            <!-- Records -->\n            <div class=\"records-scroll\">\n              @for (record of addableRecords; track record) {\n                <div class=\"record-item\"\n                  [class.in-list]=\"record.isInList\"\n                  [class.selected]=\"record.isSelected\"\n                  (click)=\"toggleRecordSelection(record)\">\n                  <div class=\"record-checkbox\">\n                    @if (record.isInList) {\n                      <span class=\"fa-solid fa-check in-list-icon\" title=\"Already in list\"></span>\n                    }\n                    @if (!record.isInList) {\n                      <input type=\"checkbox\"\n                        [checked]=\"record.isSelected\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"toggleRecordSelection(record)\">\n                    }\n                  </div>\n                  <div class=\"record-name\">{{ record.Name }}</div>\n                  @if (record.isInList) {\n                    <span class=\"in-list-badge\">In List</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddRecords()\"\n        [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n        variant=\"primary\">\n        Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddRecordsDialog()\"\n        [disabled]=\"addDialogSaving\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <mj-dialog\n    Title=\"Add Records from Views\"\n    (Close)=\"closeAddFromViewDialog()\"\n    [Visible]=\"showAddFromViewDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"500\">\n    <div class=\"dialog-content\">\n      @if (showAddFromViewLoader && fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && addFromViewTotal > 0 && !fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addFromViewTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && !fetchingRecordsToSave && addFromViewTotal === 0) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!showAddFromViewLoader) {\n        <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n        <div class=\"views-list\">\n          @if (!userViews || userViews.length === 0) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-folder-open empty-icon\"></span>\n              <p>No saved views found for this entity</p>\n            </div>\n          }\n          @if (userViews && userViews.length > 0) {\n            @for (view of userViews; track view) {\n              <div class=\"view-item\"\n                [class.selected]=\"isViewSelected(view)\"\n                (click)=\"toggleViewSelection(view)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isViewSelected(view)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleViewSelection(view)\">\n                <span class=\"fa-solid fa-table-list view-icon\"></span>\n                <span class=\"view-name\">{{ view.Name }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddFromView()\"\n        [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n        variant=\"primary\">\n        Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddFromViewDialog()\"\n        [disabled]=\"showAddFromViewLoader\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Share Dialog -->\n@if (showShareDialog && shareDialogConfig) {\n  <mj-list-share-dialog\n    [config]=\"shareDialogConfig\"\n    [visible]=\"showShareDialog\"\n    (complete)=\"onShareDialogComplete($event)\"\n    (cancel)=\"onShareDialogCancel()\">\n  </mj-list-share-dialog>\n}\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\n   ============================================ */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Layout */\n.list-form-explorer {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Header */\n.list-header {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn, .cancel-btn {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn {\n    color: var(--mj-status-success);\n}\n\n.save-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge i {\n    font-size: 12px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Navigation Rail */\n.nav-rail {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: white;\n}\n\n.nav-item.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item i {\n    font-size: 18px;\n}\n\n.nav-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Main Content */\n.main-content {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section {\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Overview Section */\n.overview-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: var(--mj-text-disabled);\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n/* Details Card */\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n/* Actions Card */\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn i {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn span:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* Items Section */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state h3 {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: var(--mj-text-primary);\n}\n\n.empty-state p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    max-width: 400px;\n}\n\n.items-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table th {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table tr:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox {\n    width: 40px;\n}\n\n.col-name {\n    width: 35%;\n}\n\n.col-id {\n    width: 25%;\n}\n\n.col-added {\n    width: 20%;\n}\n\n.col-actions {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon {\n    color: var(--mj-text-disabled);\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.items-count {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Activity Section */\n.activity-timeline {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n/* Settings Section */\n.settings-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Add Buttons in Items Section */\n.add-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons .btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Sharing Summary */\n.sharing-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice i {\n    color: var(--mj-text-disabled);\n}\n\n/* Dialog Styles */\n.dialog-content {\n    padding: 16px 0;\n}\n\n.dialog-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n/* Add Records Dialog */\n.add-records-dialog .search-section {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog .search-input {\n    width: 100%;\n}\n\n.add-records-dialog .search-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog .records-list {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog .list-loading {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog .empty-results .empty-icon {\n    width: 48px;\n    height: 48px;\n    font-size: 24px;\n    margin-bottom: 12px;\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog .selection-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog .selection-info {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog .records-scroll {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog .record-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog .record-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog .record-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog .record-item.in-list {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog .record-checkbox {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog .in-list-icon {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog .record-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog .in-list-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n/* Add From View Dialog */\n.views-list {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.views-list .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: var(--mj-text-secondary);\n}\n\n.views-list .empty-results .empty-icon {\n    font-size: 36px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.view-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item:last-child {\n    border-bottom: none;\n}\n\n.view-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item .view-icon {\n    color: var(--mj-brand-primary);\n}\n\n.view-item .view-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .list-form-explorer {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item::before {\n        display: none;\n    }\n\n    .header-stats {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box input {\n        width: 100%;\n    }\n\n    .section-actions {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}\n", ".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJListFormComponentExtended, { className: "MJListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 55 }); })();
 //# sourceMappingURL=list-form.component.js.map