jupiter-dynamic-forms 1.16.3 → 1.16.4

package/dist/index.mjs

@@ -607,11 +607,12 @@ class XBRLFormBuilder {
     };
   }
   /**
-   * Build a form section from a presentation role
+   * Extract section title from role name (remove role number prefix)
+   * Handle missing role property gracefully by using role ID as fallback
    */
   static buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language = "en", periodPreferences) {
-    var _a;
-    const title = this.extractRoleTitle(role.role);
+    var _a, _b;
+    const title = this.extractRoleTitle(role.role || role.id || "Unknown Role");
     const nonAbstractConcepts = this.getAllNonAbstractConcepts(role);
     const periodTypes = new Set(
       nonAbstractConcepts.filter((concept) => concept.periodType).map((concept) => concept.periodType)
@@ -634,6 +635,11 @@ class XBRLFormBuilder {
         }
       });
     }
+    if ((!hypercubeRole || !((_b = hypercubeRole.items) == null ? void 0 : _b.length)) && hypercubeData) {
+      conceptTrees.forEach(
+        (conceptTree) => this.applyCrossRoleDimensions(conceptTree, role.id, hypercubeData, language)
+      );
+    }
     return {
       id: role.id,
       title,
@@ -894,6 +900,73 @@ class XBRLFormBuilder {
     });
     return filtered;
   }
+  /**
+   * Find typed dimension members from another role that shares the same concept.
+   * Called when the current role has no hypercube dimensions.
+   * Returns typed member info only when EXACTLY ONE other role matches.
+   */
+  static findCrossRoleDimensions(conceptId, currentRoleId, hypercubeData, language = "en") {
+    var _a, _b;
+    const matchingRoles = [];
+    for (const role of hypercubeData.roles) {
+      if (role.roleId === currentRoleId)
+        continue;
+      for (const item2 of role.items) {
+        if (!((_a = item2.conceptIds) == null ? void 0 : _a.includes(conceptId)))
+          continue;
+        if (!((_b = item2.dimensions) == null ? void 0 : _b.some((d2) => d2.typedMember)))
+          continue;
+        matchingRoles.push(role);
+        break;
+      }
+    }
+    if (matchingRoles.length !== 1)
+      return null;
+    const matchingRole = matchingRoles[0];
+    const item = matchingRole.items.find((i2) => {
+      var _a2;
+      return (_a2 = i2.conceptIds) == null ? void 0 : _a2.includes(conceptId);
+    });
+    if (!item)
+      return null;
+    const result = [];
+    for (const dimension of item.dimensions) {
+      if (!dimension.typedMember)
+        continue;
+      const labelObj = dimension.labels.find((l2) => l2.lang === language) || dimension.labels.find((l2) => l2.lang === "en") || dimension.labels[0];
+      const axisLabel = (labelObj == null ? void 0 : labelObj.label) || dimension.id;
+      result.push({
+        axisId: dimension.id,
+        axisLabel,
+        typedMemberId: dimension.typedMember.id,
+        memberLabel: axisLabel
+      });
+    }
+    return result.length > 0 ? result : null;
+  }
+  /**
+   * Recursively walk a concept tree and set crossRoleTypedMembers on every field
+   * whose concept appears in exactly one other hypercube role with typed dimensions.
+   */
+  static applyCrossRoleDimensions(conceptTree, currentRoleId, hypercubeData, language) {
+    var _a;
+    if (!conceptTree.abstract && conceptTree.fields && conceptTree.fields.length > 0) {
+      const crossRoleTypedMembers = this.findCrossRoleDimensions(
+        conceptTree.originalConceptId,
+        currentRoleId,
+        hypercubeData,
+        language
+      );
+      if (crossRoleTypedMembers) {
+        conceptTree.fields.forEach((field2) => {
+          field2.crossRoleTypedMembers = crossRoleTypedMembers;
+        });
+      }
+    }
+    (_a = conceptTree.children) == null ? void 0 : _a.forEach(
+      (child) => this.applyCrossRoleDimensions(child, currentRoleId, hypercubeData, language)
+    );
+  }
   /**
    * Generate default columns based on period types of non-abstract concepts in a role
    */
@@ -1473,10 +1546,21 @@ class XBRLFormBuilder {
   }
   /**
    * Extract role title from role string
+   * Handles various role formats and missing data gracefully
    */
   static extractRoleTitle(role) {
+    if (!role)
+      return "Unnamed Section";
     const match = role.match(/^\[[\d]+\]\s*(.+)$/);
-    return match ? match[1].trim() : role;
+    if (match) {
+      return match[1].trim();
+    }
+    if (role.match(/^[a-z]+:[^:]*$/i) || role.match(/^urn:[^:]+:[^:]+/i)) {
+      const parts = role.split(/[:\-]/);
+      const lastPart = parts[parts.length - 1];
+      return lastPart.replace(/[_\-]/g, " ").replace(/\b\w/g, (l2) => l2.toUpperCase());
+    }
+    return role.trim() || "Unnamed Section";
   }
   /**
    * Extract role order from role string
@@ -2024,7 +2108,7 @@ class DraftStorageService {
   /**
    * Create metadata snapshot from current form state
    */
-  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData, unitData, reportingLanguage = "en") {
+  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData, unitData, reportingLanguage = "en", repeatCounts) {
     return {
       periodStartDate,
       periodEndDate,
@@ -2037,6 +2121,7 @@ class DraftStorageService {
       periodPreferences,
       periodData,
       unitData,
+      repeatCounts,
       schemaVersion: this.STORAGE_VERSION
     };
   }
@@ -2646,7 +2731,6 @@ function getInputTypeForConceptType(conceptType, datatypes) {
     const baseTypeChain = resolveBaseTypeChain(conceptType, datatypes);
     if (baseTypeChain.length > 0) {
       const config = determineInputTypeFromBaseChain(baseTypeChain, datatypes);
-      console.log(`🔍 [Type Resolution] ${conceptType} → Chain:`, baseTypeChain, "→ Type:", config.fieldType, config.enumerations ? `(${config.enumerations.length} options)` : "");
       return config;
     }
   }
@@ -2903,6 +2987,7 @@ let JupiterFormField = class extends LitElement {
     this.locale = "en-US";
     this.hideLabel = false;
     this.mode = "inputForm";
+    this.typedMemberValues = {};
     this._errors = [];
     this._xbrlErrors = [];
     this._touched = false;
@@ -3241,6 +3326,20 @@ let JupiterFormField = class extends LitElement {
       periodType: this.field.periodType
     });
   }
+  _handleCrossRoleTypedMemberChange(event, axisId) {
+    const value = event.target.value;
+    this.typedMemberValues = { ...this.typedMemberValues, [axisId]: value };
+    this.dispatchEvent(new CustomEvent("typed-member-change", {
+      detail: {
+        columnId: this.columnId,
+        conceptId: this.conceptId,
+        axisId,
+        value
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
   /**
    * Renders a plain text label for readonly mode instead of an interactive input.
    * Resolves the display value for selects (shows label, not raw id) and
@@ -3498,6 +3597,21 @@ let JupiterFormField = class extends LitElement {
                 </select>
               </div>
             ` : ""}
+
+            ${this.field.crossRoleTypedMembers && this.field.crossRoleTypedMembers.length > 0 ? html`
+              ${this.field.crossRoleTypedMembers.map((tm) => html`
+                <div class="period-controls">
+                  <label>${tm.axisLabel}:</label>
+                  <input
+                    type="text"
+                    class="typed-member-input"
+                    .value="${this.typedMemberValues[tm.axisId] || ""}"
+                    @input="${(e2) => this._handleCrossRoleTypedMemberChange(e2, tm.axisId)}"
+                    ?disabled="${this.disabled}"
+                  />
+                </div>
+              `)}
+            ` : ""}
           </div>
         </div>
       </div>
@@ -3686,7 +3800,7 @@ JupiterFormField.styles = css`
       border-radius: 8px;
       padding: 24px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-      max-width: 400px;
+      max-width: 800px;
       width: 90%;
     }
 
@@ -3730,7 +3844,7 @@ JupiterFormField.styles = css`
 
     .period-popup-content .period-controls {
       display: grid;
-      grid-template-columns: 60px 1fr;
+      grid-template-columns: 200px 1fr;
       gap: 12px;
       align-items: center;
       margin-top: 0;
@@ -3741,6 +3855,8 @@ JupiterFormField.styles = css`
       font-weight: 500;
       color: var(--jupiter-text-primary, #333);
       text-align: right;
+      white-space: normal;
+      word-break: break-word;
     }
 
     .period-popup-content .period-controls input[type="date"] {
@@ -3778,22 +3894,44 @@ JupiterFormField.styles = css`
       cursor: not-allowed;
     }
 
+    .period-popup-content .period-controls .typed-member-input {
+      flex: 1;
+      padding: 6px 8px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 13px;
+      font-family: inherit;
+      background: var(--jupiter-input-background, #fff);
+    }
+
+    .period-popup-content .period-controls .typed-member-input:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 2px var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2));
+    }
+
+    .period-popup-content .period-controls .typed-member-input:disabled {
+      background: var(--jupiter-disabled-background, #f5f5f5);
+      color: var(--jupiter-disabled-text, #999);
+      cursor: not-allowed;
+    }
+
     .field-input {
       width: 100%;
       padding: 6px 8px; /* Reduced padding for table cells */
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
       font-size: 13px; /* Slightly smaller font for table */
       font-family: inherit;
-      background: var(--jupiter-input-background, #fff);
-      color: var(--jupiter-text-primary, #333);
+      background: transparent !important;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       box-sizing: border-box;
     }
 
     .field-input:focus {
       outline: none;
-      border-color: var(--jupiter-primary-color, #1976d2);
-      box-shadow: 0 0 0 2px var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2));
+      border-color: var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
+      box-shadow: 0 0 0 2px var(--boxShadowColor, var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2)));
     }
 
     .field-input:disabled {
@@ -3964,6 +4102,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "unit", 2);
+__decorateClass$5([
+  n2({ type: Object })
+], JupiterFormField.prototype, "typedMemberValues", 2);
 __decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_errors", 2);
@@ -4005,6 +4146,9 @@ let JupiterConceptTree = class extends LitElement {
     this.locale = "en-US";
     this.expandedConcepts = /* @__PURE__ */ new Set();
     this.mode = "inputForm";
+    this.typedMemberData = {};
+    this.showAddButton = false;
+    this.showRemoveButton = false;
     this._expanded = true;
   }
   connectedCallback() {
@@ -4042,6 +4186,20 @@ let JupiterConceptTree = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleAddRepeat() {
+    this.dispatchEvent(new CustomEvent("add-concept-repeat", {
+      detail: { conceptId: this.concept.id },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleRemoveRepeat() {
+    this.dispatchEvent(new CustomEvent("remove-concept-repeat", {
+      detail: { conceptId: this.concept.id },
+      bubbles: true,
+      composed: true
+    }));
+  }
   _handlePeriodChange(event) {
     console.log(`🌲 [ConceptTree] Received period-change event:`, event.detail);
     event.stopPropagation();
@@ -4066,11 +4224,19 @@ let JupiterConceptTree = class extends LitElement {
                @click="${this._toggleExpanded}">
             ${hasChildren ? "▶" : ""}
           </div>
-          <div class="concept-label" 
+          <div class="concept-label"
                @click="${this._toggleExpanded}"
                title="${this.concept.id}${this.concept.description ? " - " + this.concept.description : ""}">
             ${this.concept.label}
           </div>
+          ${this.showAddButton ? html`
+            <button class="repeat-btn" type="button" title="Add row"
+              @click="${this._handleAddRepeat}">+</button>
+          ` : ""}
+          ${this.showRemoveButton ? html`
+            <button class="repeat-btn remove" type="button" title="Remove row"
+              @click="${this._handleRemoveRepeat}">−</button>
+          ` : ""}
         </div>
       </td>
 
@@ -4102,6 +4268,7 @@ let JupiterConceptTree = class extends LitElement {
                 .masterData="${this.masterData}"
                 .facts="${this.facts}"
                 .column="${column2}"
+                .typedMemberValues="${this.typedMemberData[`${this.concept.id}__${column2.id}`] || {}}"
                 @field-change="${this._handleFieldChange}"
                 @period-change="${this._handlePeriodChange}"
               ></jupiter-form-field>
@@ -4121,7 +4288,7 @@ JupiterConceptTree.styles = css`
     .concept-name-cell {
       vertical-align: top;
       padding: 2px 4px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-bottom: none;
       background: var(--jupiter-concept-background, #f8f9fa);
       position: sticky;
@@ -4133,12 +4300,13 @@ JupiterConceptTree.styles = css`
     }
 
     .concept-name-cell.abstract {
-      background: var(--jupiter-abstract-background, #f0f2f5);
+      background: var(--bg-color-1, var(--jupiter-abstract-background, #f0f2f5));
       font-weight: 600;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
     }
 
     .concept-name-cell.leaf {
-      background: var(--jupiter-leaf-background, #fff);
+      background: var(--bg-color-2, var(--jupiter-leaf-background, #fff));
       font-weight: 400;
     }
 
@@ -4179,7 +4347,7 @@ JupiterConceptTree.styles = css`
 
     .concept-label {
       flex: 1;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       cursor: pointer;
       word-wrap: break-word;
       overflow-wrap: break-word;
@@ -4191,9 +4359,9 @@ JupiterConceptTree.styles = css`
     .field-cell {
       vertical-align: middle;
       padding: 2px 6px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-bottom: none;
-      background: var(--jupiter-cell-background, #fff);
+      background: var(--bg-color-2, var(--jupiter-cell-background, #fff));
       min-height: 28px;
       text-align: center;
       min-width: 180px;
@@ -4201,11 +4369,11 @@ JupiterConceptTree.styles = css`
     }
 
     .field-cell.empty {
-      background: var(--jupiter-empty-cell-background, #f8f9fa);
+      background: var(--bg-color-2, var(--jupiter-empty-cell-background, #f8f9fa));
     }
 
     .field-cell.abstract-row {
-      background: var(--jupiter-abstract-cell-background, #f0f2f5);
+      background: var(--bg-color-2, var(--jupiter-abstract-cell-background, #f0f2f5));
     }
 
     /* Children are rendered as separate table rows, not nested */
@@ -4213,6 +4381,38 @@ JupiterConceptTree.styles = css`
       display: none;
     }
 
+    .repeat-btn {
+      flex-shrink: 0;
+      margin-left: 4px;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      border-radius: 3px;
+      border: 1px solid var(--jupiter-primary-color, #1976d2);
+      color: var(--jupiter-primary-color, #1976d2);
+      background: transparent;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .repeat-btn:hover {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: #fff;
+    }
+
+    .repeat-btn.remove {
+      border-color: var(--jupiter-error-color, #d32f2f);
+      color: var(--jupiter-error-color, #d32f2f);
+    }
+
+    .repeat-btn.remove:hover {
+      background: var(--jupiter-error-color, #d32f2f);
+      color: #fff;
+    }
 
   `;
 __decorateClass$4([
@@ -4254,6 +4454,15 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Array })
 ], JupiterConceptTree.prototype, "facts", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], JupiterConceptTree.prototype, "typedMemberData", 2);
+__decorateClass$4([
+  n2({ type: Boolean })
+], JupiterConceptTree.prototype, "showAddButton", 2);
+__decorateClass$4([
+  n2({ type: Boolean })
+], JupiterConceptTree.prototype, "showRemoveButton", 2);
 __decorateClass$4([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -4575,7 +4784,7 @@ JupiterAddColumnDialog.styles = css`
     }
 
     .dialog {
-      background: white;
+      background: var(--bg-color-2, var(--jupiter-card-background, #fff));
       border-radius: 8px;
       padding: 24px;
       min-width: 400px;
@@ -4600,7 +4809,7 @@ JupiterAddColumnDialog.styles = css`
     .dialog-title {
       font-size: 20px;
       font-weight: 600;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       margin: 0 0 8px 0;
     }
 
@@ -4634,7 +4843,7 @@ JupiterAddColumnDialog.styles = css`
       display: block;
       font-weight: 500;
       margin-bottom: 6px;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       font-size: 14px;
     }
 
@@ -4647,18 +4856,20 @@ JupiterAddColumnDialog.styles = css`
       width: 100%;
       box-sizing: border-box;
       padding: 10px 12px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
       font-size: 14px;
       font-family: inherit;
       transition: border-color 0.2s ease;
+      background-color: transparent;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
     }
 
-    .form-input:focus {
-      outline: none;
-      border-color: var(--jupiter-primary-color, #007bff);
-      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-    }
+    // .form-input:focus {
+    //   outline: none;
+    //   border-color: var(--jupiter-primary-color, #007bff);
+    //   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    // }
 
     select.form-input {
       cursor: pointer;
@@ -4686,27 +4897,28 @@ JupiterAddColumnDialog.styles = css`
     }
 
     .btn-cancel {
-      background: var(--jupiter-neutral-background, #f5f5f5);
-      color: var(--jupiter-text-primary, #333);
+      color: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
+      border: 1px solid var(--buttonBgColor, var(--jupiter-primary-color, #1976d2)) !important;
+      background: transparent;
     }
 
-    .btn-cancel:hover {
-      background: var(--jupiter-neutral-background-hover, #e0e0e0);
-    }
+    // .btn-cancel:hover {
+    //   background: var(--jupiter-neutral-background-hover, #e0e0e0);
+    // }
 
     .btn-primary {
-      background: var(--jupiter-primary-color, #667eea);
-      color: white;
+      background: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
+      color: var(--buttonTextColor, white);
     }
 
-    .btn-primary:hover {
-      background: var(--jupiter-primary-color-dark, #5a6fd8);
-    }
+    // .btn-primary:hover {
+    //   background: var(--jupiter-primary-color-dark, #5a6fd8);
+    // }
 
-    .btn-primary:disabled {
-      background: var(--jupiter-disabled-background, #ccc);
-      cursor: not-allowed;
-    }
+    // .btn-primary:disabled {
+    //   background: var(--jupiter-disabled-background, #ccc);
+    //   cursor: not-allowed;
+    // }
 
     /* Dimension Selection Styles */
     .dimensions-section {
@@ -4862,6 +5074,7 @@ let JupiterFormSection = class extends LitElement {
     this.periodData = {};
     this.unitData = {};
     this.typedMemberData = {};
+    this.repeatCounts = {};
     this.defaultUnits = [];
     this.disabled = false;
     this.collapsible = true;
@@ -5122,6 +5335,70 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleAddRepeat(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("add-concept-repeat", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
+  _handleRemoveRepeat(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("remove-concept-repeat", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
+  /** Build the list of <tr> template results for a single flattened concept, including any repeat instances. */
+  _renderConceptRows(concept) {
+    var _a;
+    const isRepeatable = this.mode !== "readonly" && !concept.abstract && ((_a = concept.fields) == null ? void 0 : _a.some((f2) => {
+      var _a2;
+      return ((_a2 = f2.crossRoleTypedMembers) == null ? void 0 : _a2.length) > 0;
+    }));
+    const repeatCount = isRepeatable ? this.repeatCounts[concept.id] || 0 : 0;
+    const sharedProps = (instanceConcept, opts) => html`
+      <jupiter-concept-tree
+        .concept="${instanceConcept}"
+        .columns="${this.columns}"
+        .datatypes="${this.datatypes}"
+        .formData="${this.formData}"
+        .periodData="${this.periodData}"
+        .unitData="${this.unitData}"
+        .defaultUnits="${this.defaultUnits}"
+        .disabled="${this.disabled}"
+        .locale="${this.locale}"
+        .expandedConcepts="${this._expandedConcepts}"
+        .mode="${this.mode}"
+        .masterData="${this.masterData}"
+        .facts="${instanceConcept.facts}"
+        .typedMemberData="${this.typedMemberData}"
+        .showAddButton="${opts.showAdd || false}"
+        .showRemoveButton="${opts.showRemove || false}"
+        @field-change="${this._handleFieldChange}"
+        @period-change="${this._handlePeriodChange}"
+        @concept-expand="${this._handleConceptExpand}"
+        @add-concept-repeat="${this._handleAddRepeat}"
+        @remove-concept-repeat="${this._handleRemoveRepeat}"
+      ></jupiter-concept-tree>
+    `;
+    const rows = [html`
+      <tr>${sharedProps(concept, { showAdd: isRepeatable })}</tr>
+    `];
+    for (let n3 = 1; n3 <= repeatCount; n3++) {
+      const instanceConcept = {
+        ...concept,
+        id: `${concept.id}__repeat_${n3}`,
+        label: "",
+        children: [],
+        abstract: false
+      };
+      rows.push(html`
+        <tr>${sharedProps(instanceConcept, { showRemove: true })}</tr>
+      `);
+    }
+    return rows;
+  }
   render() {
     if (!this.section.concepts || this.section.concepts.length === 0) {
       return html`
@@ -5242,28 +5519,7 @@ let JupiterFormSection = class extends LitElement {
               </tr>
             </thead>
             <tbody class="table-body">
-              ${this._flattenConcepts(this.section.concepts, this._expandedConcepts).filter((concept) => this.mode !== "readonly" || !this._isConceptRowBlank(concept)).map((concept) => html`
-                <tr>
-                  <jupiter-concept-tree
-                    .concept="${concept}"
-                    .columns="${this.columns}"
-                    .datatypes="${this.datatypes}"
-                    .formData="${this.formData}"
-                    .periodData="${this.periodData}"
-                    .unitData="${this.unitData}"
-                    .defaultUnits="${this.defaultUnits}"
-                    .disabled="${this.disabled}"
-                    .locale="${this.locale}"
-                    .expandedConcepts="${this._expandedConcepts}"
-                    .mode="${this.mode}"
-                    .masterData="${this.masterData}"
-                    .facts="${concept.facts}"
-                    @field-change="${this._handleFieldChange}"
-                    @period-change="${this._handlePeriodChange}"
-                    @concept-expand="${this._handleConceptExpand}"
-                  ></jupiter-concept-tree>
-                </tr>
-              `)}
+              ${this._flattenConcepts(this.section.concepts, this._expandedConcepts).filter((concept) => this.mode !== "readonly" || !this._isConceptRowBlank(concept)).flatMap((concept) => this._renderConceptRows(concept))}
             </tbody>
           </table>
         </div>
@@ -5384,13 +5640,20 @@ JupiterFormSection.styles = css`
       /* Table row - no special display needed */
     }
 
+    .header-cell:first-child {
+        border-radius: 6px 0 0 0;
+    }
+    .header-cell:last-child {
+        border-radius: 0 6px 0 0;
+    }
+
     .header-cell {
       padding: 8px 12px;
       text-align: left;
       font-weight: 600;
-      color: var(--jupiter-text-primary, #333);
-      border: 1px solid var(--jupiter-border-color, #ddd);
-      background: var(--jupiter-header-background, #f8f9fa);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
+      background: var(--bg-color-1, var(--jupiter-header-background, #f8f9fa));
       min-width: 180px;
       width: 180px;
       font-size: 14px;
@@ -5562,6 +5825,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: Object })
 ], JupiterFormSection.prototype, "typedMemberData", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "repeatCounts", 2);
 __decorateClass$2([
   n2({ type: Array })
 ], JupiterFormSection.prototype, "defaultUnits", 2);
@@ -6594,24 +6860,25 @@ JupiterFilterRolesDialog.styles = css`
 
     .dialog-header {
       padding: 20px 24px 16px;
-      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      border-bottom: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       display: flex;
       align-items: center;
       gap: 12px;
+      background: var(--bg-color-1, var(--jupiter-header-background, #f8f9fa));
     }
 
     .dialog-title {
       font-size: 18px;
       font-weight: 600;
       margin: 0;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       flex: 1;
     }
 
     .filter-icon {
       width: 20px;
       height: 20px;
-      fill: var(--jupiter-primary-color, #1976d2);
+      fill: var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
     }
 
     .close-button {
@@ -6620,23 +6887,24 @@ JupiterFilterRolesDialog.styles = css`
       font-size: 24px;
       cursor: pointer;
       padding: 4px;
-      color: var(--jupiter-text-secondary, #666);
+      color: var(--primaryTextColor, var(--jupiter-text-secondary, #666));
       border-radius: 4px;
       transition: background-color 0.2s ease;
     }
 
-    .close-button:hover {
-      background: var(--jupiter-hover-background, #f5f5f5);
-    }
+    // .close-button:hover {
+    //   background: var(--jupiter-hover-background, #f5f5f5);
+    // }
 
     .dialog-content {
+      background: var(--bg-color-2, var(--jupiter-form-content-background, #fff));
       flex: 1;
       overflow-y: auto;
       padding: 20px 24px;
     }
 
     .description {
-      color: var(--jupiter-text-secondary, #666);
+      color: var(--primaryTextColor, var(--secondaryTextColor, var(--jupiter-text-secondary, #666))) ;
       font-size: 14px;
       margin: 0 0 20px 0;
       line-height: 1.5;
@@ -6655,25 +6923,25 @@ JupiterFilterRolesDialog.styles = css`
     }
 
     .search-input {
-      width: 100%;
+      width: stretch;
       padding: 10px 40px 10px 12px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
       font-size: 14px;
       font-family: inherit;
-      background: var(--jupiter-background, #fff);
-      color: var(--jupiter-text-primary, #333);
+      background: transparent;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       transition: border-color 0.2s ease;
     }
 
-    .search-input:focus {
-      outline: none;
-      border-color: var(--jupiter-primary-color, #1976d2);
-      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
-    }
+    // .search-input:focus {
+    //   outline: none;
+    //   border-color: var(--jupiter-primary-color, #1976d2);
+    //   box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
+    // }
 
     .search-input::placeholder {
-      color: var(--jupiter-text-secondary, #666);
+      color: var(--primaryTextColor, var(--jupiter-text-secondary, #666));
     }
 
     .search-icon {
@@ -6731,8 +6999,8 @@ JupiterFilterRolesDialog.styles = css`
 
     .selection-control {
       background: none;
-      border: 1px solid var(--jupiter-primary-color, #1976d2);
-      color: var(--jupiter-primary-color, #1976d2);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
+      color: var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
       padding: 6px 12px;
       border-radius: 4px;
       font-size: 12px;
@@ -6741,7 +7009,7 @@ JupiterFilterRolesDialog.styles = css`
     }
 
     .selection-control:hover {
-      background: var(--jupiter-primary-color, #1976d2);
+      background: var(--menuBgColorLighter, var(--jupiter-primary-color, #1976d2));
       color: white;
     }
 
@@ -6751,7 +7019,7 @@ JupiterFilterRolesDialog.styles = css`
       gap: 8px;
       max-height: 300px;
       overflow-y: auto;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
       padding: 12px;
     }
@@ -6766,13 +7034,17 @@ JupiterFilterRolesDialog.styles = css`
     }
 
     .role-item:hover {
-      background: var(--jupiter-hover-background, #f5f5f5);
+      background: var(--menuBgColorLighter, var(--jupiter-hover-background, #f5f5f5));
     }
 
     .role-checkbox {
       margin-top: 2px;
       cursor: pointer;
     }
+    
+    .role-info * {
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333)) !important;
+    }
 
     .role-info {
       flex: 1;
@@ -6802,15 +7074,15 @@ JupiterFilterRolesDialog.styles = css`
     .period-controls {
       margin-top: 8px;
       padding: 8px;
-      background: var(--jupiter-background-light, #f8f9fa);
+      background: var(--bg-color-1, var(--jupiter-background-light, #f8f9fa));
       border-radius: 4px;
-      border: 1px solid var(--jupiter-border-color, #e0e0e0);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #e0e0e0));
     }
 
     .period-controls-label {
       font-size: 12px;
       font-weight: 600;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       margin: 0 0 6px 0;
     }
 
@@ -6938,11 +7210,11 @@ JupiterFilterRolesDialog.styles = css`
 
     .dialog-actions {
       padding: 16px 24px;
-      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      border-top: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       display: flex;
       gap: 12px;
       justify-content: flex-end;
-      background: var(--jupiter-form-actions-background, #f8f9fa);
+      background: var(--bg-color-2, var(--jupiter-form-actions-background, #f8f9fa));
     }
 
     .dialog-actions button {
@@ -6956,23 +7228,23 @@ JupiterFilterRolesDialog.styles = css`
     }
 
     .btn-primary {
-      background: var(--jupiter-primary-color, #1976d2);
-      color: white;
+      background: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
+      color: var(--buttonTextColor, white);
     }
 
-    .btn-primary:hover:not(:disabled) {
-      background: var(--jupiter-primary-color-dark, #1565c0);
-    }
+    // .btn-primary:hover:not(:disabled) {
+    //   background: var(--jupiter-primary-color-dark, #1565c0);
+    // }
 
     .btn-secondary {
+      color: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
+      border: 1px solid var(--buttonBgColor, var(--jupiter-primary-color, #1976d2)) !important;
       background: transparent;
-      color: var(--jupiter-text-secondary, #666);
-      border: 1px solid var(--jupiter-border-color, #ddd);
     }
 
-    .btn-secondary:hover:not(:disabled) {
-      background: var(--jupiter-hover-background, #f5f5f5);
-    }
+    // .btn-secondary:hover:not(:disabled) {
+    //   background: var(--jupiter-hover-background, #f5f5f5);
+    // }
 
     button:disabled {
       opacity: 0.6;
@@ -7187,6 +7459,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._preservedUnitData = {};
     this._typedMemberData = {};
     this._preservedTypedMemberData = {};
+    this._repeatCounts = {};
     this._columns = [];
     this._errors = [];
     this._touched = /* @__PURE__ */ new Set();
@@ -7405,7 +7678,6 @@ let JupiterDynamicForm = class extends LitElement {
     if (!((_a = this._currentSchema) == null ? void 0 : _a.sections)) {
       return;
     }
-    console.log("🔍 [DynamicForm] Extracting typed member values from facts");
     this._currentSchema.sections.forEach((section2) => {
       this._extractTypedMembersFromConcepts(section2.concepts || [], section2);
     });
@@ -7848,6 +8120,10 @@ let JupiterDynamicForm = class extends LitElement {
       if (this._typedMemberData[field2.columnId]) {
         this._preservedTypedMemberData[field2.columnId] = { ...this._typedMemberData[field2.columnId] };
       }
+      const crossRoleKey = `${concept.id}__${field2.columnId}`;
+      if (this._typedMemberData[crossRoleKey]) {
+        this._preservedTypedMemberData[crossRoleKey] = { ...this._typedMemberData[crossRoleKey] };
+      }
     });
     if (concept.children) {
       concept.children.forEach((child) => {
@@ -7868,6 +8144,10 @@ let JupiterDynamicForm = class extends LitElement {
       if (this._preservedTypedMemberData[field2.columnId]) {
         this._typedMemberData[field2.columnId] = { ...this._preservedTypedMemberData[field2.columnId] };
       }
+      const crossRoleKey = `${concept.id}__${field2.columnId}`;
+      if (this._preservedTypedMemberData[crossRoleKey]) {
+        this._typedMemberData[crossRoleKey] = { ...this._preservedTypedMemberData[crossRoleKey] };
+      }
     });
     if (concept.children) {
       concept.children.forEach((child) => {
@@ -7909,7 +8189,8 @@ let JupiterDynamicForm = class extends LitElement {
       this._periodPreferences,
       this._periodData,
       this._unitData,
-      this.reportingLanguage
+      this.reportingLanguage,
+      this._repeatCounts
     );
     this._draftStorageService.saveDraft(currentFormData, currentMetadata);
     console.log("✅ Current form data saved to draft storage with NEW preferences");
@@ -8080,14 +8361,72 @@ let JupiterDynamicForm = class extends LitElement {
     const parts = uniqueConceptKey.split("::");
     return parts.length > 1 ? parts[1] : uniqueConceptKey;
   }
+  _handleAddConceptRepeat(event) {
+    const { conceptId } = event.detail;
+    this._repeatCounts = { ...this._repeatCounts, [conceptId]: (this._repeatCounts[conceptId] || 0) + 1 };
+    this._dirty = true;
+  }
+  _handleRemoveConceptRepeat(event) {
+    const { conceptId: rawConceptId } = event.detail;
+    const repeatMatch = rawConceptId.match(/^(.+)__repeat_(\d+)$/);
+    const baseConceptId = repeatMatch ? repeatMatch[1] : rawConceptId;
+    const removeIndex = repeatMatch ? parseInt(repeatMatch[2]) : this._repeatCounts[rawConceptId] || 0;
+    const current = this._repeatCounts[baseConceptId] || 0;
+    if (current <= 0 || removeIndex < 1 || removeIndex > current)
+      return;
+    const newFormData = { ...this._formData };
+    const newTypedData = { ...this._typedMemberData };
+    const newUnitData = { ...this._unitData };
+    const newPeriodData = { ...this._periodData };
+    for (let n3 = removeIndex; n3 < current; n3++) {
+      const fromId = `${baseConceptId}__repeat_${n3 + 1}`;
+      const toId = `${baseConceptId}__repeat_${n3}`;
+      if (newFormData[fromId] !== void 0) {
+        newFormData[toId] = newFormData[fromId];
+      } else {
+        delete newFormData[toId];
+      }
+      const toPrefix = `${toId}__`;
+      const fromPrefix = `${fromId}__`;
+      const fromEntries = Object.keys(newTypedData).filter((k) => k.startsWith(fromPrefix));
+      Object.keys(newTypedData).filter((k) => k.startsWith(toPrefix)).forEach((k) => delete newTypedData[k]);
+      fromEntries.forEach((k) => {
+        newTypedData[`${toId}__${k.slice(fromPrefix.length)}`] = newTypedData[k];
+      });
+      fromEntries.forEach((k) => delete newTypedData[k]);
+      if (newUnitData[fromId] !== void 0) {
+        newUnitData[toId] = newUnitData[fromId];
+      } else {
+        delete newUnitData[toId];
+      }
+      if (newPeriodData[fromId] !== void 0) {
+        newPeriodData[toId] = newPeriodData[fromId];
+      } else {
+        delete newPeriodData[toId];
+      }
+    }
+    const lastId = `${baseConceptId}__repeat_${current}`;
+    delete newFormData[lastId];
+    delete newUnitData[lastId];
+    delete newPeriodData[lastId];
+    const lastPrefix = `${lastId}__`;
+    Object.keys(newTypedData).filter((k) => k.startsWith(lastPrefix)).forEach((k) => delete newTypedData[k]);
+    this._formData = newFormData;
+    this._typedMemberData = newTypedData;
+    this._unitData = newUnitData;
+    this._periodData = newPeriodData;
+    this._repeatCounts = { ...this._repeatCounts, [baseConceptId]: current - 1 };
+    this._dirty = true;
+  }
   _handleTypedMemberChange(event) {
-    const { columnId, axisId, value } = event.detail;
-    console.log(`🔍 [DynamicForm] Typed member change: columnId=${columnId}, axisId=${axisId}, value=${value}`);
+    const { columnId, axisId, value, conceptId } = event.detail;
+    const storageKey = conceptId ? `${conceptId}__${columnId}` : columnId;
+    console.log(`🔍 [DynamicForm] Typed member change: storageKey=${storageKey}, axisId=${axisId}, value=${value}`);
     const updatedTypedMemberData = { ...this._typedMemberData };
-    if (!updatedTypedMemberData[columnId]) {
-      updatedTypedMemberData[columnId] = {};
+    if (!updatedTypedMemberData[storageKey]) {
+      updatedTypedMemberData[storageKey] = {};
     }
-    updatedTypedMemberData[columnId] = { ...updatedTypedMemberData[columnId], [axisId]: value };
+    updatedTypedMemberData[storageKey] = { ...updatedTypedMemberData[storageKey], [axisId]: value };
     this._typedMemberData = updatedTypedMemberData;
     this._dirty = true;
     this.requestUpdate();
@@ -8715,7 +9054,8 @@ let JupiterDynamicForm = class extends LitElement {
       this._periodPreferences,
       this._periodData,
       this._unitData,
-      this.reportingLanguage
+      this.reportingLanguage,
+      this._repeatCounts
     );
     const draftPayloadSnapshot = JSON.stringify({
       draftData,
@@ -8829,6 +9169,10 @@ let JupiterDynamicForm = class extends LitElement {
       this._preservedTypedMemberData = {};
       console.log("🔄 Restored typed member data");
     }
+    if (metadata.repeatCounts) {
+      this._repeatCounts = metadata.repeatCounts;
+      console.log("🔄 Restored repeat counts:", this._repeatCounts);
+    }
     if (metadata.periodData) {
       this._periodData = metadata.periodData;
       console.log("🔄 Restored custom field-level period data:", Object.keys(this._periodData).length, "concepts");
@@ -8872,7 +9216,7 @@ let JupiterDynamicForm = class extends LitElement {
     const restoredPeriodData = {};
     const restoredUnitData = {};
     formData.forEach((entry) => {
-      let { conceptId, value, columnId, period, unit } = entry;
+      let { conceptId, draftInstanceId, value, columnId, period, unit } = entry;
       if (!columnId && period) {
         columnId = this._inferColumnIdFromPeriod(period, conceptId);
         if (!columnId) {
@@ -8880,13 +9224,15 @@ let JupiterDynamicForm = class extends LitElement {
           return;
         }
       }
-      const actualConceptId = this._findActualConceptId(conceptId);
-      const conceptIdToUse = actualConceptId || conceptId;
+      const instanceKey = draftInstanceId || conceptId;
+      const baseConceptId = instanceKey.includes("__repeat_") ? instanceKey.split("__repeat_")[0] : instanceKey;
+      const actualBaseId = this._findActualConceptId(baseConceptId);
+      const conceptIdToUse = instanceKey.includes("__repeat_") ? `${actualBaseId || baseConceptId}__repeat_${instanceKey.split("__repeat_")[1]}` : actualBaseId || instanceKey;
       if (!restoredFormData[conceptIdToUse]) {
         restoredFormData[conceptIdToUse] = {};
       }
       restoredFormData[conceptIdToUse][columnId] = value;
-      console.log(`📦 Restored: ${conceptIdToUse}[${columnId}] = ${value}`);
+      console.log(`📦 Restored: ${conceptIdToUse}[${columnId}] = ${value}${instanceKey !== conceptId ? ` (repeat instance)` : ""}`);
       if (period) {
         if (!restoredPeriodData[conceptIdToUse]) {
           restoredPeriodData[conceptIdToUse] = {};
@@ -9542,7 +9888,7 @@ let JupiterDynamicForm = class extends LitElement {
       }
       if (concept.fields && concept.fields.length > 0) {
         concept.fields.forEach((field2) => {
-          var _a, _b, _c, _d;
+          var _a, _b, _c, _d, _e;
           const conceptData = this._formData[concept.id];
           let fieldValue = conceptData == null ? void 0 : conceptData[field2.columnId];
           if ((fieldValue === void 0 || fieldValue === null || fieldValue === "") && this.masterData) {
@@ -9558,6 +9904,8 @@ let JupiterDynamicForm = class extends LitElement {
             const fieldPeriodData = (_a = this._periodData[concept.id]) == null ? void 0 : _a[field2.columnId];
             const submissionEntry = {
               conceptId: concept.id,
+              draftInstanceId: concept.id,
+              // used during draft restoration to route value to the correct _formData slot
               columnId: field2.columnId,
               // CRITICAL: Include columnId for draft restoration
               value: fieldValue,
@@ -9623,12 +9971,90 @@ let JupiterDynamicForm = class extends LitElement {
                 });
               }
             }
+            if (!submissionEntry.typedMembers && ((_e = field2.crossRoleTypedMembers) == null ? void 0 : _e.length)) {
+              const crossRoleKey = `${concept.id}__${field2.columnId}`;
+              const crossRoleValues = this._typedMemberData[crossRoleKey];
+              if (crossRoleValues) {
+                const filteredTypedMembers = {};
+                field2.crossRoleTypedMembers.forEach((tm) => {
+                  const val = crossRoleValues[tm.axisId];
+                  if (val !== void 0 && val !== null && val !== "") {
+                    filteredTypedMembers[tm.axisId] = {
+                      value: val,
+                      memberName: tm.typedMemberId
+                    };
+                  }
+                });
+                if (Object.keys(filteredTypedMembers).length > 0) {
+                  submissionEntry.typedMembers = filteredTypedMembers;
+                  console.log(`🔍 [Submission] Adding cross-role typed members for ${concept.id}/${field2.columnId}:`, filteredTypedMembers);
+                }
+              }
+            }
             if (sectionTitle === targetRole) {
               console.warn(`[DUPLICATE DEBUG] Final submission entry:`, submissionEntry);
             }
             submissionData.push(submissionEntry);
           }
         });
+        const repeatCount = this._repeatCounts[concept.id] || 0;
+        if (repeatCount > 0 && concept.fields.some((f2) => {
+          var _a;
+          return (_a = f2.crossRoleTypedMembers) == null ? void 0 : _a.length;
+        })) {
+          for (let n3 = 1; n3 <= repeatCount; n3++) {
+            const instanceId = `${concept.id}__repeat_${n3}`;
+            concept.fields.forEach((field2) => {
+              var _a, _b, _c, _d, _e;
+              const instanceValue = (_a = this._formData[instanceId]) == null ? void 0 : _a[field2.columnId];
+              if (instanceValue === void 0 || instanceValue === null || instanceValue === "")
+                return;
+              const column2 = this._findColumnByIdInSection(field2.columnId, section2);
+              const fieldPeriodData = (_b = this._periodData[instanceId]) == null ? void 0 : _b[field2.columnId];
+              const instanceEntry = {
+                conceptId: concept.id,
+                // original concept ID (not synthetic repeat ID)
+                draftInstanceId: instanceId,
+                // synthetic ID used during draft restoration to route to the correct _formData slot
+                columnId: field2.columnId,
+                value: instanceValue,
+                period: {
+                  type: concept.periodType || "duration"
+                }
+              };
+              if (concept.periodType === "instant") {
+                instanceEntry.period.date = (fieldPeriodData == null ? void 0 : fieldPeriodData.instantDate) || (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field2.periodInstantDate || field2.periodEndDate || field2.periodStartDate || this.periodStartDate;
+              } else {
+                instanceEntry.period.startDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field2.periodStartDate || this.periodStartDate;
+                instanceEntry.period.endDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field2.periodEndDate || this.periodEndDate;
+              }
+              const instanceUnit = (_c = this._unitData[instanceId]) == null ? void 0 : _c[field2.columnId];
+              if (instanceUnit) {
+                instanceEntry.unit = instanceUnit;
+              }
+              if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_d = column2.dimensionData) == null ? void 0 : _d.dimensionIdKey)) {
+                instanceEntry.dimension = column2.dimensionData.dimensionIdKey;
+              }
+              if ((_e = field2.crossRoleTypedMembers) == null ? void 0 : _e.length) {
+                const crossRoleKey = `${instanceId}__${field2.columnId}`;
+                const crossRoleValues = this._typedMemberData[crossRoleKey];
+                if (crossRoleValues) {
+                  const filteredTypedMembers = {};
+                  field2.crossRoleTypedMembers.forEach((tm) => {
+                    const val = crossRoleValues[tm.axisId];
+                    if (val !== void 0 && val !== null && val !== "") {
+                      filteredTypedMembers[tm.axisId] = { value: val, memberName: tm.typedMemberId };
+                    }
+                  });
+                  if (Object.keys(filteredTypedMembers).length > 0) {
+                    instanceEntry.typedMembers = filteredTypedMembers;
+                  }
+                }
+              }
+              submissionData.push(instanceEntry);
+            });
+          }
+        }
       }
       if (concept.children) {
         this._processConceptsForSubmission(concept.children, submissionData, section2);
@@ -9758,13 +10184,6 @@ let JupiterDynamicForm = class extends LitElement {
     }
     const allFields = [];
     this._collectAllFields(section2.concepts || [], new Set((section2.columns || []).map((col) => col.id)), section2.columns || [], allFields);
-    console.warn(`📊 Total fields found: ${allFields.length}`);
-    console.warn(`
-📋 FIELD DETAILS:`);
-    allFields.forEach((field2, index) => {
-      const status = field2.isEmpty ? "❌ EMPTY" : "✅ FILLED";
-      console.warn(`  ${index + 1}. ${field2.conceptId} [${field2.columnId}]: ${status} = ${JSON.stringify(field2.value)}`);
-    });
     const hasErrors = this._roleHasErrors(roleId);
     const emptyCount = allFields.filter((f2) => f2.isEmpty).length;
     const filledCount = allFields.filter((f2) => !f2.isEmpty).length;
@@ -9839,10 +10258,8 @@ let JupiterDynamicForm = class extends LitElement {
             if (matchedFact && matchedFact.value !== null && matchedFact.value !== void 0 && matchedFact.value !== "") {
               value = matchedFact.value;
               isEmpty = false;
-              console.warn(`  ✨ FACT PRE-POPULATED: ${fieldConceptId} [${field2.columnId}] = ${JSON.stringify(value)}`);
             }
           }
-          console.warn(`  🔍 Field lookup: concept.id="${conceptIdWithSuffix}", field.conceptId="${fieldConceptId}", value=${JSON.stringify(value)}, isEmpty=${isEmpty}`);
           allFields.push({
             conceptId: fieldConceptId,
             columnId: field2.columnId,
@@ -10302,6 +10719,7 @@ let JupiterDynamicForm = class extends LitElement {
             .periodData="${this._periodData}"
             .unitData="${this._unitData}"
             .typedMemberData="${this._typedMemberData}"
+            .repeatCounts="${this._repeatCounts}"
             .defaultUnits="${this.defaultUnits}"
             .disabled="${this.disabled || this.readonly}"
             .collapsible="${config.collapsibleSections !== false}"
@@ -10315,6 +10733,8 @@ let JupiterDynamicForm = class extends LitElement {
             @field-change="${this._handleFieldChange}"
             @period-change="${this._handlePeriodChange}"
             @typed-member-change="${this._handleTypedMemberChange}"
+            @add-concept-repeat="${this._handleAddConceptRepeat}"
+            @remove-concept-repeat="${this._handleRemoveConceptRepeat}"
             @section-expand="${this._handleSectionExpand}"
             @concept-expand="${this._handleConceptExpand}"
             @column-remove="${this._handleColumnRemove}"
@@ -10431,6 +10851,7 @@ let JupiterDynamicForm = class extends LitElement {
                 .periodData="${this._periodData}"
                 .unitData="${this._unitData}"
                 .typedMemberData="${this._typedMemberData}"
+                .repeatCounts="${this._repeatCounts}"
                 .defaultUnits="${this.defaultUnits}"
                 .disabled="${this.disabled || this.readonly}"
                 .collapsible="${false}"
@@ -10444,6 +10865,8 @@ let JupiterDynamicForm = class extends LitElement {
                 .periodEndDate="${this.periodEndDate}"
                 @field-change="${this._handleFieldChange}"
                 @typed-member-change="${this._handleTypedMemberChange}"
+                @add-concept-repeat="${this._handleAddConceptRepeat}"
+                @remove-concept-repeat="${this._handleRemoveConceptRepeat}"
                 @section-expand="${this._handleSectionExpand}"
                 @concept-expand="${this._handleConceptExpand}"
                 @column-remove="${this._handleColumnRemove}"
@@ -10713,7 +11136,7 @@ JupiterDynamicForm.styles = css`
       right: 0;
       padding: 16px 24px;
       border-top: 1px solid var(--jupiter-border-color, #ddd);
-      background: var(--jupiter-form-actions-background, #f8f9fa);
+      background: var(--bg-color-2, var(--jupiter-form-actions-background, #f8f9fa));
       display: flex;
       gap: 12px;
       align-items: center;
@@ -10724,6 +11147,7 @@ JupiterDynamicForm.styles = css`
     .form-sections {
       padding: 24px;
       padding-bottom: 100px; /* Add space for fixed footer */
+      background: var(--bg-color-2);
     }
 
     .validation-summary {
@@ -10761,22 +11185,23 @@ JupiterDynamicForm.styles = css`
     }
 
     .btn-primary {
-      background: var(--jupiter-primary-color, #1976d2);
-      color: white;
+      background: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
+      color: var(--buttonTextColor, white);
     }
 
-    .btn-primary:hover:not(:disabled) {
-      background: var(--jupiter-primary-color-dark, #1565c0);
-    }
+    // .btn-primary:hover:not(:disabled) {
+    //   background: var(--jupiter-primary-color-dark, #1565c0);
+    // }
 
     .btn-secondary {
-      background: var(--jupiter-secondary-color, #757575);
-      color: white;
+      color: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
+      border: 1px solid var(--buttonBgColor, var(--jupiter-primary-color, #1976d2)) !important;
+      background: transparent;
     }
 
-    .btn-secondary:hover:not(:disabled) {
-      background: var(--jupiter-secondary-color-dark, #616161);
-    }
+    // .btn-secondary:hover:not(:disabled) {
+    //   background: var(--jupiter-secondary-color-dark, #616161);
+    // }
 
     .btn-outline {
       background: transparent;
@@ -10854,7 +11279,7 @@ JupiterDynamicForm.styles = css`
       padding: 8px 16px;
       background: transparent;
       border: 1px solid var(--jupiter-primary-color, #1976d2);
-      color: var(--jupiter-primary-color, #1976d2);
+      color: var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
       border-radius: 4px;
       font-size: 13px;
       font-weight: 500;
@@ -10863,10 +11288,10 @@ JupiterDynamicForm.styles = css`
       margin-right: auto;
     }
 
-    .filter-roles-button:hover:not(:disabled) {
-      background: var(--jupiter-primary-color, #1976d2);
-      color: white;
-    }
+    // .filter-roles-button:hover:not(:disabled) {
+    //   background: var(--jupiter-primary-color, #1976d2);
+    //   color: white;
+    // }
 
     .filter-roles-button .filter-icon {
       width: 16px;
@@ -10877,8 +11302,8 @@ JupiterDynamicForm.styles = css`
     .roles-count {
       display: inline-flex;
       align-items: center;
-      background: var(--jupiter-primary-color, #1976d2);
-      color: white;
+      background: var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
+      color: var(--headerBgColor, white) !important;
       border-radius: 10px;
       font-size: 11px;
       font-weight: 600;
@@ -10917,9 +11342,9 @@ JupiterDynamicForm.styles = css`
     .side-panel-roles-list {
       width: 280px;
       min-width: 280px;
-      border-right: 1px solid var(--jupiter-border-color, #ddd);
+      border-right: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       overflow-y: auto;
-      background: var(--jupiter-background-light, #f8f9fa);
+      background: var(--bg-color-2, var(--jupiter-background-light, #f8f9fa));
       display: flex;
       flex-direction: column;
       transition: width 0.3s ease, min-width 0.3s ease;
@@ -10939,8 +11364,10 @@ JupiterDynamicForm.styles = css`
       right: 0px;
       width: 32px;
       height: 32px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
-      background: var(--jupiter-background, #fff);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
+      background: var(--bg-color-2, var(--jupiter-background, #fff));
+      color: var(--primaryTextColor);
+
       border-radius: 4px;
       cursor: pointer;
       display: flex;
@@ -10948,7 +11375,6 @@ JupiterDynamicForm.styles = css`
       justify-content: center;
       z-index: 100;
       transition: all 0.2s ease;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
 
     .side-panel-toggle-btn:hover {
@@ -10972,7 +11398,7 @@ JupiterDynamicForm.styles = css`
       position: sticky;
       top: 0;
       z-index: 10;
-      background: var(--jupiter-background, #fff);
+      background: var(--bg-color-2, var(--jupiter-background, #fff));
       padding: 16px;
       border-bottom: 1px solid var(--jupiter-border-color, #ddd);
     }
@@ -10980,21 +11406,21 @@ JupiterDynamicForm.styles = css`
     .side-panel-search-input {
       width: 100%;
       padding: 10px 40px 10px 12px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
       font-size: 14px;
       font-family: inherit;
-      background: var(--jupiter-background, #fff);
-      color: var(--jupiter-text-primary, #333);
+      background: transparent;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       transition: border-color 0.2s ease;
       box-sizing: border-box;
     }
 
-    .side-panel-search-input:focus {
-      outline: none;
-      border-color: var(--jupiter-primary-color, #1976d2);
-      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
-    }
+    // .side-panel-search-input:focus {
+    //   outline: none;
+    //   border-color: var(--jupiter-primary-color, #1976d2);
+    //   box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
+    // }
 
     .side-panel-search-input::placeholder {
       color: var(--jupiter-text-secondary, #666);
@@ -11054,16 +11480,16 @@ JupiterDynamicForm.styles = css`
       border-bottom: 1px solid var(--jupiter-border-color, #e0e0e0);
       transition: background-color 0.2s ease;
       font-size: 14px;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       line-height: 1.4;
     }
 
-    .side-panel-role-item:hover {
-      background: var(--jupiter-hover-background, #e8e8e8);
-    }
+    // .side-panel-role-item:hover {
+    //   background: var(--jupiter-hover-background, #e8e8e8);
+    // }
 
     .side-panel-role-item.active {
-      background: var(--jupiter-primary-color, #1976d2);
+      background: var(--light-color-1, var(--jupiter-primary-color, #1976d2));
       color: white;
       font-weight: 500;
     }
@@ -11511,6 +11937,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_preservedTypedMemberData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_repeatCounts", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_columns", 2);