@memberjunction/ng-core-entity-forms 5.12.0 → 5.14.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 (11) hide show
  1. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +3 -3
  2. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
  3. package/dist/lib/custom/Actions/action-execution-log-form.component.js +3 -3
  4. package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
  5. package/dist/lib/custom/Actions/action-form.component.js +3 -3
  6. package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
  7. package/dist/lib/custom/EntityActions/entityaction.form.component.js +3 -3
  8. package/dist/lib/custom/EntityActions/entityaction.form.component.js.map +1 -1
  9. package/dist/lib/custom/Lists/list-form.component.js +7 -7
  10. package/dist/lib/custom/Lists/list-form.component.js.map +1 -1
  11. package/package.json +31 -31
package/dist/lib/custom/Lists/list-form.component.js CHANGED
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
8
8
  import { Subject, debounceTime } from 'rxjs';
9
- import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
9
+ import { RegisterClass, UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
10
10
  import { BaseFormComponent } from '@memberjunction/ng-base-forms';
11
11
  import { SharedService } from '@memberjunction/ng-shared';
12
12
  import { MJListFormComponent } from '../../generated/Entities/MJList/mjlist.form.component';
@@ -1361,7 +1361,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
1361
1361
  ResultType: 'simple'
1362
1362
  }, this.metadata.CurrentUser);
1363
1363
  if (result.Success) {
1364
- this.existingListDetailIds = new Set(result.Results.map(r => r.RecordID));
1364
+ this.existingListDetailIds = new Set(result.Results.map(r => NormalizeUUID(r.RecordID)));
1365
1365
  }
1366
1366
  }
1367
1367
  onAddRecordsSearchChange(value) {
@@ -1401,7 +1401,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
1401
1401
  return {
1402
1402
  ID: recordId,
1403
1403
  Name: nameField ? String(record[nameField.Name]) : recordId,
1404
- isInList: this.existingListDetailIds.has(recordId),
1404
+ isInList: this.existingListDetailIds.has(NormalizeUUID(recordId)),
1405
1405
  isSelected: false
1406
1406
  };
1407
1407
  });
@@ -1523,13 +1523,13 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
1523
1523
  const recordIdSet = new Set();
1524
1524
  for (const userView of this.userViewsToAdd) {
1525
1525
  const runViewResult = await rv.RunView({
1526
- EntityName: 'MJ: User Views',
1526
+ ViewID: userView.ID,
1527
1527
  ViewEntity: userView,
1528
1528
  Fields: ['ID']
1529
1529
  }, this.metadata.CurrentUser);
1530
1530
  if (runViewResult.Success) {
1531
1531
  const records = runViewResult.Results;
1532
- records.forEach(r => recordIdSet.add(r.ID));
1532
+ records.forEach(r => recordIdSet.add(NormalizeUUID(r.ID)));
1533
1533
  }
1534
1534
  }
1535
1535
  // Filter out records already in the list
@@ -1683,7 +1683,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
1683
1683
  i0.ɵɵconditional(ctx.showAddFromViewDialog ? 39 : -1);
1684
1684
  i0.ɵɵadvance();
1685
1685
  i0.ɵɵconditional(ctx.showShareDialog && ctx.shareDialogConfig ? 40 : -1);
1686
- } }, 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\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 min-height: 100vh;\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 }); }
1686
+ } }, 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 }); }
1687
1687
  };
1688
1688
  MJListFormComponentExtended = __decorate([
1689
1689
  RegisterClass(BaseFormComponent, 'MJ: Lists')
@@ -1691,7 +1691,7 @@ MJListFormComponentExtended = __decorate([
1691
1691
  export { MJListFormComponentExtended };
1692
1692
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJListFormComponentExtended, [{
1693
1693
  type: Component,
1694
- 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/* 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 min-height: 100vh;\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"] }]
1694
+ 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"] }]
1695
1695
  }], null, null); })();
1696
1696
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJListFormComponentExtended, { className: "MJListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 55 }); })();
1697
1697
  //# sourceMappingURL=list-form.component.js.map