jupiter-dynamic-forms 1.13.0 → 1.14.1

package/dist/index.mjs

@@ -346,9 +346,9 @@ class FormValidator {
   static validateField(fieldId, conceptId, columnId, value, fieldType, rules = []) {
     const errors = [];
     for (const rule of rules) {
-      const error = this.validateRule(fieldId, conceptId, columnId, value, fieldType, rule);
-      if (error) {
-        errors.push(error);
+      const error2 = this.validateRule(fieldId, conceptId, columnId, value, fieldType, rule);
+      if (error2) {
+        errors.push(error2);
       }
     }
     return errors;
@@ -579,18 +579,25 @@ class XBRLFormBuilder {
    * @param periodPreferences - User preferences for which period columns to show per role
    */
   static buildFormSchema(xbrlInput, periodStartDate, periodEndDate, language = "en", periodPreferences) {
-    var _a;
+    var _a, _b;
     if (!xbrlInput.presentation || xbrlInput.presentation.length === 0) {
       throw new Error("XBRL presentation data is required");
     }
     const presentationData = xbrlInput.presentation[0];
     const hypercubeData = (_a = xbrlInput.hypercubes) == null ? void 0 : _a[0];
+    const datatypes = Array.isArray(xbrlInput.datatypes) ? xbrlInput.datatypes : ((_b = xbrlInput.datatypes) == null ? void 0 : _b.concepts) || [];
     const sections = [];
     const sortedRoles = [...presentationData.roles].sort((a2, b2) => {
       return a2.role.localeCompare(b2.role);
     });
     sortedRoles.forEach((role) => {
       const section2 = this.buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language, periodPreferences);
+      if (datatypes && datatypes.length > 0) {
+        section2.datatypes = datatypes;
+        console.log(`✅ [buildFormSchema] Attached ${datatypes.length} datatypes to section ${section2.id}`);
+      } else {
+        console.warn(`⚠️ [buildFormSchema] No datatypes available for section ${section2.id}`);
+      }
       this.assignFieldColumnIds(section2);
       sections.push(section2);
     });
@@ -660,9 +667,9 @@ class XBRLFormBuilder {
         columnIds = ["duration"];
       }
       columnIds.forEach((columnId) => {
-        const field = this.createFieldFromConcept(concept, periodStartDate, periodEndDate, columnId);
-        if (field)
-          fields.push(field);
+        const field2 = this.createFieldFromConcept(concept, periodStartDate, periodEndDate, columnId);
+        if (field2)
+          fields.push(field2);
       });
     }
     const children = [];
@@ -709,7 +716,7 @@ class XBRLFormBuilder {
     } else {
       columnId = "duration";
     }
-    const field = {
+    const field2 = {
       id: `${concept.id}_${columnId}_field`,
       conceptId: concept.id,
       columnId,
@@ -728,9 +735,9 @@ class XBRLFormBuilder {
       periodInstantDate: concept.periodType === "instant" ? periodEndDate || periodStartDate || "2025-01-01" : void 0
     };
     if (concept.id === "nl-cd_DescriptionLocationNL__a64trl") {
-      console.log(`🏗️ [Field Creation] Concept: ${concept.id}, periodType from concept: ${concept.periodType}, Field periodType: ${field.periodType}, ColumnId: ${columnId}`);
+      console.log(`🏗️ [Field Creation] Concept: ${concept.id}, periodType from concept: ${concept.periodType}, Field periodType: ${field2.periodType}, ColumnId: ${columnId}`);
     }
-    return field;
+    return field2;
   }
   /**
    * Map XBRL data type to form field type
@@ -786,8 +793,8 @@ class XBRLFormBuilder {
    * Recursively assign column IDs to fields in a concept tree
    */
   static assignColumnIdsToConceptFields(conceptTree, columnIds) {
-    conceptTree.fields = conceptTree.fields.filter((field) => {
-      return columnIds.includes(field.columnId);
+    conceptTree.fields = conceptTree.fields.filter((field2) => {
+      return columnIds.includes(field2.columnId);
     });
     if (conceptTree.children) {
       conceptTree.children.forEach((child) => {
@@ -911,8 +918,8 @@ class XBRLFormBuilder {
       const date = new Date(dateString);
       date.setFullYear(date.getFullYear() - 1);
       return date.toISOString().split("T")[0];
-    } catch (error) {
-      console.error(`Error calculating previous year for date ${dateString}:`, error);
+    } catch (error2) {
+      console.error(`Error calculating previous year for date ${dateString}:`, error2);
       return dateString;
     }
   }
@@ -1500,6 +1507,25 @@ const column$1 = {
 const section$1 = {
   enterPlaceholder: "Enter"
 };
+const field$1 = {
+  selectOption: "Select an option...",
+  select: "Select...",
+  enterDetailedExplanation: "Enter detailed explanation...",
+  enterAmountNoDecimals: "Enter amount (no decimals)",
+  enterCurrency: "0.00",
+  enterText: "Enter text",
+  enterWholeNumber: "Enter whole number",
+  enterPositiveNumber: "Enter positive number",
+  enterDecimalValue: "Enter decimal value",
+  enterNumberOfShares: "Enter number of shares",
+  yearFormat: "YYYY",
+  enterPercentage: "Enter percentage",
+  emailPlaceholder: "email@example.com",
+  urlPlaceholder: "https://example.com",
+  phonePlaceholder: "+1 (555) 000-0000",
+  enterValue: "Enter value",
+  enterDetailedInformation: "Enter detailed information..."
+};
 const admin$1 = {
   title: "Configure Roles",
   description: "Select which roles should display the 'Show Previous Year' checkbox and configure period type columns."
@@ -1508,13 +1534,26 @@ const validation$1 = {
   summary: "Please fix the following errors before submitting:",
   errorsFound: "errors found"
 };
+const error$1 = {
+  popup: {
+    title: "Validation Errors",
+    message: "Please fix the following validation errors before saving:",
+    field: "Field:",
+    value: "Value:",
+    errors: "Errors:",
+    clickToFocus: "Click to focus this field",
+    ok: "OK"
+  }
+};
 const enTranslations = {
   form: form$1,
   filter: filter$1,
   column: column$1,
   section: section$1,
+  field: field$1,
   admin: admin$1,
-  validation: validation$1
+  validation: validation$1,
+  error: error$1
 };
 const form = {
   loading: "Formulier laden...",
@@ -1581,6 +1620,25 @@ const column = {
 const section = {
   enterPlaceholder: "Invoeren"
 };
+const field = {
+  selectOption: "Selecteer een optie...",
+  select: "Selecteer...",
+  enterDetailedExplanation: "Voer gedetailleerde uitleg in...",
+  enterAmountNoDecimals: "Voer bedrag in (geen decimalen)",
+  enterCurrency: "0,00",
+  enterText: "Voer tekst in",
+  enterWholeNumber: "Voer geheel getal in",
+  enterPositiveNumber: "Voer positief getal in",
+  enterDecimalValue: "Voer decimale waarde in",
+  enterNumberOfShares: "Voer aantal aandelen in",
+  yearFormat: "JJJJ",
+  enterPercentage: "Voer percentage in",
+  emailPlaceholder: "email@voorbeeld.nl",
+  urlPlaceholder: "https://voorbeeld.nl",
+  phonePlaceholder: "+31 (0)20 123 4567",
+  enterValue: "Voer waarde in",
+  enterDetailedInformation: "Voer gedetailleerde informatie in..."
+};
 const admin = {
   title: "Rollen configureren",
   description: "Selecteer welke rollen het selectievakje 'Vorig jaar weergeven' moeten weergeven en configureer periodetype kolommen."
@@ -1589,13 +1647,26 @@ const validation = {
   summary: "Corrigeer de volgende fouten voordat u indient:",
   errorsFound: "fouten gevonden"
 };
+const error = {
+  popup: {
+    title: "Validatiefouten",
+    message: "Corrigeer de volgende validatiefouten voordat u opslaat:",
+    field: "Veld:",
+    value: "Waarde:",
+    errors: "Fouten:",
+    clickToFocus: "Klik om dit veld te focussen",
+    ok: "OK"
+  }
+};
 const nlTranslations = {
   form,
   filter,
   column,
   section,
+  field,
   admin,
-  validation
+  validation,
+  error
 };
 const translations = {
   en: enTranslations,
@@ -1707,8 +1778,8 @@ class DraftStorageService {
         customColumns: metadata.customColumns.length
       });
       return true;
-    } catch (error) {
-      console.error("❌ Failed to save draft:", error);
+    } catch (error2) {
+      console.error("❌ Failed to save draft:", error2);
       return false;
     }
   }
@@ -1736,8 +1807,8 @@ class DraftStorageService {
         metadata,
         version: this.STORAGE_VERSION
       };
-    } catch (error) {
-      console.error("❌ Failed to load draft:", error);
+    } catch (error2) {
+      console.error("❌ Failed to load draft:", error2);
       return null;
     }
   }
@@ -1756,8 +1827,8 @@ class DraftStorageService {
       if (!metadataStr)
         return null;
       return JSON.parse(metadataStr);
-    } catch (error) {
-      console.error("❌ Failed to load draft metadata:", error);
+    } catch (error2) {
+      console.error("❌ Failed to load draft metadata:", error2);
       return null;
     }
   }
@@ -1770,8 +1841,8 @@ class DraftStorageService {
       this._storage.removeItem(this.DRAFT_METADATA_KEY);
       console.log("🗑️ Draft cleared successfully");
       return true;
-    } catch (error) {
-      console.error("❌ Failed to clear draft:", error);
+    } catch (error2) {
+      console.error("❌ Failed to clear draft:", error2);
       return false;
     }
   }
@@ -1831,16 +1902,18 @@ class DraftStorageService {
   /**
    * Create metadata snapshot from current form state
    */
-  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData) {
+  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData, unitData) {
     return {
       periodStartDate,
       periodEndDate,
       language,
       selectedRoleIds,
+      // Store enhanced structure (with roleURI and order) or legacy string array
       customColumns: this.extractCustomColumns(allSections),
       typedMemberData,
       periodPreferences,
       periodData,
+      unitData,
       schemaVersion: this.STORAGE_VERSION
     };
   }
@@ -1863,6 +1936,204 @@ class DraftStorageService {
     return { compatible, warnings };
   }
 }
+class XBRLValidator {
+  /**
+   * Validates a value against XBRL datatype validation rules
+   * Only validates when value is not blank
+   * 
+   * @param conceptType - The XBRL concept type (e.g., "nl-types:houseNumberNLItemType")
+   * @param value - The input value to validate
+   * @param datatypes - Array of XBRL datatypes from taxonomy
+   * @returns Validation result with errors if any
+   */
+  static validateConceptValue(conceptType, value, datatypes) {
+    const errors = [];
+    if (value === null || value === void 0 || value === "") {
+      return { valid: true, errors: [] };
+    }
+    if (!conceptType || !datatypes || datatypes.length === 0) {
+      return { valid: true, errors: [] };
+    }
+    const datatype = this.findDatatype(conceptType, datatypes);
+    if (!datatype || !datatype.validation) {
+      return { valid: true, errors: [] };
+    }
+    const validation2 = datatype.validation;
+    const stringValue = String(value);
+    if (validation2.pattern) {
+      const patternError = this.validatePattern(stringValue, validation2.pattern);
+      if (patternError) {
+        errors.push(patternError);
+      }
+    }
+    if (validation2.length !== void 0) {
+      const lengthError = this.validateExactLength(stringValue, validation2.length);
+      if (lengthError) {
+        errors.push(lengthError);
+      }
+    }
+    if (validation2.minLength !== void 0) {
+      const minLengthError = this.validateMinLength(stringValue, validation2.minLength);
+      if (minLengthError) {
+        errors.push(minLengthError);
+      }
+    }
+    if (validation2.maxLength !== void 0) {
+      const maxLengthError = this.validateMaxLength(stringValue, validation2.maxLength);
+      if (maxLengthError) {
+        errors.push(maxLengthError);
+      }
+    }
+    if (validation2.totalDigits !== void 0) {
+      const totalDigitsError = this.validateTotalDigits(stringValue, validation2.totalDigits);
+      if (totalDigitsError) {
+        errors.push(totalDigitsError);
+      }
+    }
+    return {
+      valid: errors.length === 0,
+      errors
+    };
+  }
+  /**
+   * Finds the datatype definition for a given concept type
+   * Handles both exact matches and base type chain resolution
+   */
+  static findDatatype(conceptType, datatypes) {
+    let datatype = datatypes.find((dt) => dt.type === conceptType);
+    if (datatype) {
+      return datatype;
+    }
+    const visited = /* @__PURE__ */ new Set();
+    let currentType = conceptType;
+    while (currentType && !visited.has(currentType)) {
+      visited.add(currentType);
+      datatype = datatypes.find((dt) => dt.type === currentType);
+      if (datatype) {
+        if (datatype.validation) {
+          return datatype;
+        }
+        currentType = datatype.basetype;
+      } else {
+        break;
+      }
+    }
+    return void 0;
+  }
+  /**
+   * Validates that value matches the regex pattern
+   */
+  static validatePattern(value, pattern) {
+    try {
+      const regex = new RegExp(`^${pattern}$`);
+      if (!regex.test(value)) {
+        return {
+          type: "pattern",
+          message: `Value does not match required pattern: ${pattern}`,
+          expectedValue: pattern,
+          actualValue: value
+        };
+      }
+    } catch (error2) {
+      console.error(`Invalid regex pattern: ${pattern}`, error2);
+      return {
+        type: "pattern",
+        message: `Invalid pattern configuration: ${pattern}`,
+        expectedValue: pattern,
+        actualValue: value
+      };
+    }
+    return null;
+  }
+  /**
+   * Validates that value has exact length
+   */
+  static validateExactLength(value, requiredLength) {
+    if (value.length !== requiredLength) {
+      return {
+        type: "length",
+        message: `Value must be exactly ${requiredLength} characters (current: ${value.length})`,
+        expectedValue: requiredLength,
+        actualValue: value.length
+      };
+    }
+    return null;
+  }
+  /**
+   * Validates minimum length
+   */
+  static validateMinLength(value, minLength) {
+    if (value.length < minLength) {
+      return {
+        type: "minLength",
+        message: `Value must be at least ${minLength} characters (current: ${value.length})`,
+        expectedValue: minLength,
+        actualValue: value.length
+      };
+    }
+    return null;
+  }
+  /**
+   * Validates maximum length
+   */
+  static validateMaxLength(value, maxLength) {
+    if (value.length > maxLength) {
+      return {
+        type: "maxLength",
+        message: `Value must not exceed ${maxLength} characters (current: ${value.length})`,
+        expectedValue: maxLength,
+        actualValue: value.length
+      };
+    }
+    return null;
+  }
+  /**
+   * Validates total digits (for numeric values)
+   */
+  static validateTotalDigits(value, totalDigits) {
+    const digitsOnly = value.replace(/[^\d]/g, "");
+    if (digitsOnly.length > totalDigits) {
+      return {
+        type: "totalDigits",
+        message: `Value must not exceed ${totalDigits} total digits (current: ${digitsOnly.length})`,
+        expectedValue: totalDigits,
+        actualValue: digitsOnly.length
+      };
+    }
+    return null;
+  }
+  /**
+   * Gets a human-readable summary of validation rules for a concept type
+   * Useful for displaying validation hints to users
+   */
+  static getValidationRulesSummary(conceptType, datatypes) {
+    if (!conceptType || !datatypes) {
+      return [];
+    }
+    const datatype = this.findDatatype(conceptType, datatypes);
+    if (!datatype || !datatype.validation) {
+      return [];
+    }
+    const validation2 = datatype.validation;
+    const rules = [];
+    if (validation2.pattern) {
+      rules.push(`Must match pattern: ${validation2.pattern}`);
+    }
+    if (validation2.length !== void 0) {
+      rules.push(`Must be exactly ${validation2.length} characters`);
+    }
+    if (validation2.minLength !== void 0) {
+      rules.push(`Minimum ${validation2.minLength} characters`);
+    }
+    if (validation2.maxLength !== void 0) {
+      rules.push(`Maximum ${validation2.maxLength} characters`);
+    }
+    if (validation2.totalDigits !== void 0) {
+      rules.push(`Maximum ${validation2.totalDigits} total digits`);
+    }
+    return rules;
+  }
+}
 const TYPE_INPUT_MAP = {
   // ==========================================
   // Dutch XBRL Types (nl-types namespace)
@@ -1870,7 +2141,7 @@ const TYPE_INPUT_MAP = {
   // Text area for long-form explanations
   "nl-types:formattedExplanationItemType": {
     fieldType: "textarea",
-    placeholder: "Enter detailed explanation..."
+    placeholder: I18n.t("field.enterDetailedExplanation")
   },
   // Monetary values without decimals (whole numbers only)
   "nl-types:monetaryNoDecimals20ItemType": {
@@ -1878,7 +2149,7 @@ const TYPE_INPUT_MAP = {
     htmlInputType: "number",
     allowDecimals: false,
     step: 1,
-    placeholder: "Enter amount (no decimals)"
+    placeholder: I18n.t("field.enterAmountNoDecimals")
   },
   // ==========================================
   // Standard XBRL Types (xbrli namespace)
@@ -1889,13 +2160,13 @@ const TYPE_INPUT_MAP = {
     htmlInputType: "number",
     allowDecimals: true,
     step: 0.01,
-    placeholder: "0.00"
+    placeholder: I18n.t("field.enterCurrency")
   },
   // String/text types
   "xbrli:stringItemType": {
     fieldType: "text",
     htmlInputType: "text",
-    placeholder: "Enter text"
+    placeholder: I18n.t("field.enterText")
   },
   // Date types
   "xbrli:dateItemType": {
@@ -1912,7 +2183,7 @@ const TYPE_INPUT_MAP = {
     htmlInputType: "number",
     allowDecimals: false,
     step: 1,
-    placeholder: "Enter whole number"
+    placeholder: I18n.t("field.enterWholeNumber")
   },
   "xbrli:nonNegativeIntegerItemType": {
     fieldType: "integer",
@@ -1920,7 +2191,7 @@ const TYPE_INPUT_MAP = {
     allowDecimals: false,
     min: 0,
     step: 1,
-    placeholder: "Enter positive number"
+    placeholder: I18n.t("field.enterPositiveNumber")
   },
   "xbrli:positiveIntegerItemType": {
     fieldType: "integer",
@@ -1928,7 +2199,7 @@ const TYPE_INPUT_MAP = {
     allowDecimals: false,
     min: 1,
     step: 1,
-    placeholder: "Enter positive number"
+    placeholder: I18n.t("field.enterPositiveNumber")
   },
   // Numeric types - decimals
   "xbrli:decimalItemType": {
@@ -1936,7 +2207,7 @@ const TYPE_INPUT_MAP = {
     htmlInputType: "number",
     allowDecimals: true,
     step: "any",
-    placeholder: "Enter decimal value"
+    placeholder: I18n.t("field.enterDecimalValue")
   },
   // Shares (typically whole numbers or with limited decimals)
   "xbrli:sharesItemType": {
@@ -1945,7 +2216,7 @@ const TYPE_INPUT_MAP = {
     allowDecimals: true,
     min: 0,
     step: 0.01,
-    placeholder: "Enter number of shares"
+    placeholder: I18n.t("field.enterNumberOfShares")
   },
   "xbrli:shares": {
     fieldType: "number",
@@ -1953,7 +2224,7 @@ const TYPE_INPUT_MAP = {
     allowDecimals: true,
     min: 0,
     step: 0.01,
-    placeholder: "Enter number of shares"
+    placeholder: I18n.t("field.enterNumberOfShares")
   },
   // Year (gYear)
   "xbrli:gYearItemType": {
@@ -1963,7 +2234,7 @@ const TYPE_INPUT_MAP = {
     min: 1900,
     max: 2100,
     step: 1,
-    placeholder: "YYYY"
+    placeholder: I18n.t("field.yearFormat")
   },
   // Boolean types
   "xbrli:booleanItemType": {
@@ -1977,14 +2248,14 @@ const TYPE_INPUT_MAP = {
     htmlInputType: "number",
     allowDecimals: true,
     step: 0.01,
-    placeholder: "Enter percentage"
+    placeholder: I18n.t("field.enterPercentage")
   },
   "xbrli:percentItemType": {
     fieldType: "percentage",
     htmlInputType: "number",
     allowDecimals: true,
     step: 0.01,
-    placeholder: "Enter percentage"
+    placeholder: I18n.t("field.enterPercentage")
   },
   // ==========================================
   // Contact/Communication types
@@ -1992,27 +2263,36 @@ const TYPE_INPUT_MAP = {
   "xbrli:emailItemType": {
     fieldType: "email",
     htmlInputType: "email",
-    placeholder: "email@example.com"
+    placeholder: I18n.t("field.emailPlaceholder")
   },
   "xbrli:urlItemType": {
     fieldType: "url",
     htmlInputType: "url",
-    placeholder: "https://example.com"
+    placeholder: I18n.t("field.urlPlaceholder")
   },
   "xbrli:telephoneItemType": {
     fieldType: "tel",
     htmlInputType: "tel",
-    placeholder: "+1 (555) 000-0000"
+    placeholder: I18n.t("field.phonePlaceholder")
   }
 };
-function getInputTypeForConceptType(conceptType) {
+function getInputTypeForConceptType(conceptType, datatypes) {
   if (!conceptType) {
     return {
       fieldType: "text",
       htmlInputType: "text",
-      placeholder: "Enter value"
+      placeholder: I18n.t("field.enterValue")
     };
   }
+  if (datatypes && datatypes.length > 0) {
+    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;
+    }
+  }
+  console.log(`⚠️ [Type Resolution Fallback] Using pattern matching for: ${conceptType}`);
   if (TYPE_INPUT_MAP[conceptType]) {
     return TYPE_INPUT_MAP[conceptType];
   }
@@ -2024,7 +2304,7 @@ function getInputTypeForConceptType(conceptType) {
         htmlInputType: "number",
         allowDecimals: false,
         step: 1,
-        placeholder: "Enter amount (no decimals)"
+        placeholder: I18n.t("field.enterAmountNoDecimals")
       };
     }
     return {
@@ -2032,13 +2312,13 @@ function getInputTypeForConceptType(conceptType) {
       htmlInputType: "number",
       allowDecimals: true,
       step: 0.01,
-      placeholder: "0.00"
+      placeholder: I18n.t("field.enterCurrency")
     };
   }
   if (lowerType.includes("explanation") || lowerType.includes("description") || lowerType.includes("notes") || lowerType.includes("formatted")) {
     return {
       fieldType: "textarea",
-      placeholder: "Enter detailed information..."
+      placeholder: I18n.t("field.enterDetailedInformation")
     };
   }
   if (lowerType.includes("date")) {
@@ -2067,7 +2347,7 @@ function getInputTypeForConceptType(conceptType) {
       allowDecimals: false,
       min: isPositive ? 1 : isNonNegative ? 0 : void 0,
       step: 1,
-      placeholder: "Enter whole number"
+      placeholder: I18n.t("field.enterWholeNumber")
     };
   }
   if (lowerType.includes("decimal") || lowerType.includes("numeric") || lowerType.includes("number")) {
@@ -2076,7 +2356,7 @@ function getInputTypeForConceptType(conceptType) {
       htmlInputType: "number",
       allowDecimals: true,
       step: "any",
-      placeholder: "Enter decimal value"
+      placeholder: I18n.t("field.enterDecimalValue")
     };
   }
   if (lowerType.includes("percent") || lowerType.includes("pure")) {
@@ -2085,13 +2365,13 @@ function getInputTypeForConceptType(conceptType) {
       htmlInputType: "number",
       allowDecimals: true,
       step: 0.01,
-      placeholder: "Enter percentage"
+      placeholder: I18n.t("field.enterPercentage")
     };
   }
   return {
     fieldType: "text",
     htmlInputType: "text",
-    placeholder: "Enter value"
+    placeholder: I18n.t("field.enterValue")
   };
 }
 function isTextareaType(fieldType) {
@@ -2106,6 +2386,145 @@ function isNumericType(fieldType) {
 function isSelectType(fieldType) {
   return fieldType === "select";
 }
+function resolveBaseTypeChain(typeName, datatypes) {
+  const baseTypeChain = [];
+  if (!typeName) {
+    return baseTypeChain;
+  }
+  if (!datatypes || datatypes.length === 0) {
+    baseTypeChain.push(typeName);
+    return baseTypeChain;
+  }
+  let currentType = typeName;
+  const visitedTypes = /* @__PURE__ */ new Set();
+  while (currentType) {
+    baseTypeChain.push(currentType);
+    if (visitedTypes.has(currentType)) {
+      console.warn(`Circular reference detected in datatype hierarchy for type: ${currentType}`);
+      break;
+    }
+    visitedTypes.add(currentType);
+    const foundDatatype = datatypes.find((dt) => dt.type === currentType);
+    if (!foundDatatype || !foundDatatype.basetype || foundDatatype.basetype.trim() === "") {
+      break;
+    }
+    currentType = foundDatatype.basetype;
+  }
+  return baseTypeChain;
+}
+function collectEnumerationsFromChain(baseTypeChain, datatypes) {
+  if (!baseTypeChain || baseTypeChain.length === 0 || !datatypes || datatypes.length === 0) {
+    return void 0;
+  }
+  for (const typeName of baseTypeChain) {
+    const datatype = datatypes.find((dt) => dt.type === typeName);
+    if (datatype && datatype.enumerations && datatype.enumerations.length > 0) {
+      return datatype.enumerations.map((enumItem) => ({
+        id: enumItem.id || enumItem.value,
+        // Use value as fallback if id not present
+        value: enumItem.value,
+        label: enumItem.value
+        // Use value as display label
+      }));
+    }
+  }
+  return void 0;
+}
+function determineInputTypeFromBaseChain(baseTypeChain, datatypes) {
+  if (!baseTypeChain || baseTypeChain.length === 0) {
+    return {
+      fieldType: "text",
+      htmlInputType: "text",
+      placeholder: I18n.t("field.enterValue")
+    };
+  }
+  if (datatypes && datatypes.length > 0) {
+    const enumerations = collectEnumerationsFromChain(baseTypeChain, datatypes);
+    if (enumerations && enumerations.length > 0) {
+      return {
+        fieldType: "select",
+        enumerations,
+        placeholder: I18n.t("field.selectOption")
+      };
+    }
+  }
+  const chainLower = baseTypeChain.map((type) => type.toLowerCase());
+  const chainString = chainLower.join("|");
+  if (baseTypeChain.some((type) => type === "nl-types:formattedExplanationItemType") || chainString.includes("formattedexplanation") || chainString.includes("formatted") && chainString.includes("explanation")) {
+    return {
+      fieldType: "textarea",
+      placeholder: I18n.t("field.enterDetailedExplanation")
+    };
+  }
+  if (chainLower.some((type) => type.includes("date"))) {
+    if (chainString.includes("datetime") || chainString.includes("time")) {
+      return {
+        fieldType: "datetime",
+        htmlInputType: "datetime-local"
+      };
+    }
+    return {
+      fieldType: "date",
+      htmlInputType: "date"
+    };
+  }
+  if (chainLower.some((type) => type.includes("boolean") || type.includes("bool"))) {
+    return {
+      fieldType: "boolean"
+    };
+  }
+  if (chainLower.some((type) => type.includes("integer") || type === "integer")) {
+    const isNonNegative = chainString.includes("nonnegative") || chainString.includes("non-negative");
+    const isPositive = chainString.includes("positive");
+    return {
+      fieldType: "integer",
+      htmlInputType: "number",
+      allowDecimals: false,
+      min: isPositive ? 1 : isNonNegative ? 0 : void 0,
+      step: 1,
+      placeholder: I18n.t("field.enterWholeNumber")
+    };
+  }
+  if (chainLower.some((type) => type.includes("decimal") || type === "decimal")) {
+    if (chainString.includes("monetary") || chainString.includes("currency")) {
+      if (chainString.includes("nodecimals") || chainString.includes("no-decimals") || chainString.includes("nodecimals20")) {
+        return {
+          fieldType: "number",
+          htmlInputType: "number",
+          allowDecimals: false,
+          step: 1,
+          placeholder: I18n.t("field.enterAmountNoDecimals")
+        };
+      }
+      return {
+        fieldType: "currency",
+        htmlInputType: "number",
+        allowDecimals: true,
+        step: 0.01,
+        placeholder: I18n.t("field.enterCurrency")
+      };
+    }
+    return {
+      fieldType: "decimal",
+      htmlInputType: "number",
+      allowDecimals: true,
+      step: "any",
+      placeholder: I18n.t("field.enterDecimalValue")
+    };
+  }
+  if (baseTypeChain.some((type) => type === "xbrli:stringItemType") || chainLower.some((type) => type === "string" || type.includes("stringitem"))) {
+    return {
+      fieldType: "text",
+      htmlInputType: "text",
+      placeholder: I18n.t("field.enterText")
+    };
+  }
+  return {
+    fieldType: "text",
+    htmlInputType: "text",
+    placeholder: I18n.t("field.enterValue")
+  };
+}
 var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
 var __decorateClass$5 = (decorators, target, key, kind) => {
@@ -2120,18 +2539,35 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
 let JupiterFormField = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.defaultUnits = [];
     this.value = null;
     this.disabled = false;
     this.locale = "en-US";
     this.hideLabel = false;
     this._errors = [];
+    this._xbrlErrors = [];
     this._touched = false;
     this._showPeriodPopup = false;
+    this._availableUnits = [];
   }
   willUpdate(changedProperties) {
+    var _a;
     if (changedProperties.has("value") || changedProperties.has("field")) {
       this._validateField();
     }
+    if (changedProperties.has("unit") && this.unit) {
+      console.log(`🏷️ [FormField willUpdate] Unit property changed to: ${this.unit}, conceptId: ${this.conceptId}, columnId: ${this.columnId}`);
+      this.dispatchEvent(new CustomEvent("unit-change", {
+        detail: {
+          fieldId: (_a = this.field) == null ? void 0 : _a.id,
+          conceptId: this.conceptId,
+          columnId: this.columnId,
+          unit: this.unit
+        },
+        bubbles: true,
+        composed: true
+      }));
+    }
     if (changedProperties.has("field") && this.field) {
       if (this.conceptId.includes("DescriptionLocationNL") || this.columnId.startsWith("col-")) {
         console.log(`📅 [FormField willUpdate] Concept ${this.conceptId}, Column ${this.columnId}: field.periodType=${this.field.periodType}, field.periodStartDate=${this.field.periodStartDate}, field.periodEndDate=${this.field.periodEndDate}, field.periodInstantDate=${this.field.periodInstantDate}`);
@@ -2184,21 +2620,138 @@ let JupiterFormField = class extends LitElement {
   }
   _handleBlur() {
     this._touched = true;
+    this._validateXBRLDatatype();
+    console.log(`🟦 [FormField] Blur event - fieldId: ${this.field.id}, conceptId: ${this.conceptId}, columnId: ${this.columnId}`);
+    console.log(`🟦 [FormField] Current _xbrlErrors:`, this._xbrlErrors);
+    console.log(`🟦 [FormField] Current value:`, this.value);
     this.dispatchEvent(new CustomEvent("field-blur", {
       detail: {
         fieldId: this.field.id,
         conceptId: this.conceptId,
-        columnId: this.columnId
+        columnId: this.columnId,
+        xbrlValidationErrors: this._xbrlErrors
       },
-      bubbles: true
+      bubbles: true,
+      composed: true
+      // CRITICAL: Allow event to cross Shadow DOM boundaries
     }));
+    console.log(`🟦 [FormField] Dispatched field-blur event with ${this._xbrlErrors.length} errors`);
+  }
+  /**
+   * Validates the current value against XBRL datatype validation rules
+   * Called on blur event when user loses focus on the input field
+   */
+  _validateXBRLDatatype() {
+    this._xbrlErrors = [];
+    if (this.value === null || this.value === void 0 || this.value === "") {
+      return;
+    }
+    if (!this.conceptType || !this.datatypes || this.datatypes.length === 0) {
+      return;
+    }
+    const validationResult = XBRLValidator.validateConceptValue(
+      this.conceptType,
+      this.value,
+      this.datatypes
+    );
+    if (!validationResult.valid) {
+      this._xbrlErrors = validationResult.errors;
+      console.log(`❌ [FormField] XBRL Validation failed for ${this.conceptId}:`, {
+        conceptType: this.conceptType,
+        value: this.value,
+        errors: this._xbrlErrors
+      });
+    } else {
+      console.log(`✅ [FormField] XBRL Validation passed for ${this.conceptId}`);
+    }
   }
   _handlePeriodIconClick() {
+    this._availableUnits = this._collectUnitsForConceptType();
+    console.log(`📊 [FormField] Collected ${this._availableUnits.length} units for concept ${this.conceptId}:`, this._availableUnits);
+    console.log(`📊 [FormField] Current unit value: ${this.unit}`);
+    console.log(`📊 [FormField] ConceptId: ${this.conceptId}, ColumnId: ${this.columnId}`);
+    if (!this.unit && this._availableUnits.length > 0) {
+      let unitToSelect = null;
+      const defaultUnit = this._availableUnits.find((u2) => u2.isDefault === true);
+      if (defaultUnit) {
+        unitToSelect = defaultUnit.id;
+        console.log(`🎯 [FormField] Auto-selecting default unit: ${defaultUnit.id} (${defaultUnit.label})`);
+      } else if (this._availableUnits.length === 1) {
+        unitToSelect = this._availableUnits[0].id;
+        console.log(`🎯 [FormField] Auto-selecting single available unit: ${unitToSelect}`);
+      }
+      if (unitToSelect) {
+        this.unit = unitToSelect;
+        this.dispatchEvent(new CustomEvent("unit-change", {
+          detail: {
+            fieldId: this.field.id,
+            conceptId: this.conceptId,
+            columnId: this.columnId,
+            unit: this.unit
+          },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    } else if (this.unit) {
+      console.log(`📊 [FormField] Unit already set, dispatching unit-change to ensure parent stores it: ${this.unit}`);
+      this.dispatchEvent(new CustomEvent("unit-change", {
+        detail: {
+          fieldId: this.field.id,
+          conceptId: this.conceptId,
+          columnId: this.columnId,
+          unit: this.unit
+        },
+        bubbles: true,
+        composed: true
+      }));
+    }
     this._showPeriodPopup = true;
   }
+  /**
+   * Collects units from the concept's type or its basetype chain
+   * @returns Array of unit objects with id, label, and isDefault
+   */
+  _collectUnitsForConceptType() {
+    if (!this.conceptType || !this.datatypes) {
+      return [];
+    }
+    const baseTypeChain = resolveBaseTypeChain(this.conceptType, this.datatypes);
+    console.log(`🔍 [Unit Resolution] Concept: ${this.conceptId}, Type: ${this.conceptType}, BaseType Chain:`, baseTypeChain);
+    for (const typeName of baseTypeChain) {
+      const datatype = this.datatypes.find((dt) => dt.type === typeName);
+      if (datatype && datatype.units && Array.isArray(datatype.units) && datatype.units.length > 0) {
+        console.log(`✅ [Unit Resolution] Found ${datatype.units.length} units in type: ${typeName}`);
+        return datatype.units;
+      }
+    }
+    console.log(`ℹ️ [Unit Resolution] No units found for concept ${this.conceptId}`);
+    return [];
+  }
   _closePeriodPopup() {
     this._showPeriodPopup = false;
   }
+  _handleUnitChange(event) {
+    const target = event.target;
+    const value = target.value;
+    console.log(`🏷️ [FormField] Unit change detected: value=${value}, conceptId=${this.conceptId}, columnId=${this.columnId}`);
+    console.log(`🏷️ [FormField] Previous unit value: ${this.unit}`);
+    this.unit = value;
+    console.log(`🏷️ [FormField] Updated unit value to: ${this.unit}`);
+    const eventDetail = {
+      fieldId: this.field.id,
+      conceptId: this.conceptId,
+      columnId: this.columnId,
+      unit: this.unit
+    };
+    console.log(`🏷️ [FormField] Dispatching unit-change event with detail:`, eventDetail);
+    this.dispatchEvent(new CustomEvent("unit-change", {
+      detail: eventDetail,
+      bubbles: true,
+      composed: true
+    }));
+    console.log(`🏷️ [FormField] unit-change event dispatched`);
+  }
   _handlePopupOverlayClick(e2) {
     if (e2.target === e2.currentTarget) {
       this._closePeriodPopup();
@@ -2224,7 +2777,8 @@ let JupiterFormField = class extends LitElement {
         periodType: this.field.periodType,
         periodStartDate: this.periodStartDate,
         periodEndDate: this.periodEndDate,
-        periodInstantDate: this.periodInstantDate
+        periodInstantDate: this.periodInstantDate,
+        unit: this.unit
       },
       bubbles: true,
       composed: true
@@ -2237,13 +2791,12 @@ let JupiterFormField = class extends LitElement {
     });
   }
   _renderInput() {
-    var _a;
     const hasErrors = this._errors.some((e2) => e2.severity === "error");
     const hasWarnings = this._errors.some((e2) => e2.severity === "warning");
     const cssClass = `field-input ${hasErrors ? "error" : hasWarnings ? "warning" : ""}`;
     const fieldId = `${this.conceptId}__${this.columnId}`;
     const fieldName = `data[${this.conceptId}][${this.columnId}]`;
-    const typeConfig = getInputTypeForConceptType(this.conceptType);
+    const typeConfig = getInputTypeForConceptType(this.conceptType, this.datatypes);
     if (this.conceptType)
       ;
     const effectiveFieldType = typeConfig.fieldType || this.field.type || "text";
@@ -2263,6 +2816,7 @@ let JupiterFormField = class extends LitElement {
       `;
     }
     if (effectiveFieldType === "select" || this.field.type === "select") {
+      const selectOptions = typeConfig.enumerations || this.field.options || [];
       return html`
         <select
           id="${fieldId}"
@@ -2274,16 +2828,21 @@ let JupiterFormField = class extends LitElement {
           @focus="${this._handleFocus}"
           @blur="${this._handleBlur}"
         >
-          <option value="">Select...</option>
-          ${(_a = this.field.options) == null ? void 0 : _a.map((option) => html`
-            <option 
-              value="${option.value}"
-              ?disabled="${option.disabled}"
-              ?selected="${this.value === option.value}"
-            >
-              ${option.label}
-            </option>
-          `)}
+          <option value="">${typeConfig.placeholder || I18n.t("field.select")}</option>
+          ${selectOptions.map((option) => {
+        const optionValue = option.value;
+        const optionLabel = option.label || option.value;
+        const isDisabled = option.disabled || false;
+        return html`
+              <option 
+                value="${optionValue}"
+                ?disabled="${isDisabled}"
+                ?selected="${this.value === optionValue}"
+              >
+                ${optionLabel}
+              </option>
+            `;
+      })}
         </select>
       `;
     }
@@ -2431,6 +2990,25 @@ let JupiterFormField = class extends LitElement {
                 />
               </div>
             `}
+            
+            ${this._availableUnits.length > 0 ? html`
+              <div class="period-controls">
+                <label>Unit:</label>
+                <select
+                  .value="${this.unit || ""}"
+                  @change="${this._handleUnitChange}"
+                  ?disabled="${this.disabled}"
+                  class="unit-select"
+                >
+                  <option value="">Select Unit</option>
+                  ${this._availableUnits.map((unit) => html`
+                    <option value="${unit.id}" ?selected="${this.unit === unit.id}">
+                      ${unit.label || unit.id}
+                    </option>
+                  `)}
+                </select>
+              </div>
+            ` : ""}
           </div>
         </div>
       </div>
@@ -2464,9 +3042,19 @@ let JupiterFormField = class extends LitElement {
         
         ${this._errors.length > 0 && this._touched ? html`
           <div class="field-errors">
-            ${this._errors.map((error) => html`
-              <span class="field-error ${error.severity}">
-                ${error.message}
+            ${this._errors.map((error2) => html`
+              <span class="field-error ${error2.severity}">
+                ${error2.message}
+              </span>
+            `)}
+          </div>
+        ` : ""}
+        
+        ${this._xbrlErrors.length > 0 && this._touched ? html`
+          <div class="field-errors">
+            ${this._xbrlErrors.map((error2) => html`
+              <span class="field-error error">
+                ${error2.message}
               </span>
             `)}
           </div>
@@ -2617,6 +3205,28 @@ JupiterFormField.styles = css`
       box-shadow: 0 0 0 2px var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2));
     }
 
+    .period-popup-content .period-controls .unit-select {
+      padding: 8px 10px;
+      font-size: 14px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      background: var(--jupiter-input-background, #fff);
+      color: var(--jupiter-text-primary, #333);
+      cursor: pointer;
+    }
+
+    .period-popup-content .period-controls .unit-select: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 .unit-select: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 */
@@ -2733,6 +3343,12 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "conceptType", 2);
+__decorateClass$5([
+  n2({ type: Array })
+], JupiterFormField.prototype, "datatypes", 2);
+__decorateClass$5([
+  n2({ type: Array })
+], JupiterFormField.prototype, "defaultUnits", 2);
 __decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "columnId", 2);
@@ -2757,15 +3373,24 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "periodInstantDate", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterFormField.prototype, "unit", 2);
 __decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_errors", 2);
+__decorateClass$5([
+  r()
+], JupiterFormField.prototype, "_xbrlErrors", 2);
 __decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_touched", 2);
 __decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_showPeriodPopup", 2);
+__decorateClass$5([
+  r()
+], JupiterFormField.prototype, "_availableUnits", 2);
 JupiterFormField = __decorateClass$5([
   t$1("jupiter-form-field")
 ], JupiterFormField);
@@ -2785,6 +3410,9 @@ let JupiterConceptTree = class extends LitElement {
     super(...arguments);
     this.columns = [];
     this.formData = {};
+    this.periodData = {};
+    this.unitData = {};
+    this.defaultUnits = [];
     this.disabled = false;
     this.locale = "en-US";
     this.expandedConcepts = /* @__PURE__ */ new Set();
@@ -2812,11 +3440,11 @@ let JupiterConceptTree = class extends LitElement {
   }
   _getFieldForColumn(columnId) {
     var _a;
-    return (_a = this.concept.fields) == null ? void 0 : _a.find((field) => field.columnId === columnId);
+    return (_a = this.concept.fields) == null ? void 0 : _a.find((field2) => field2.columnId === columnId);
   }
-  _getFieldValue(field) {
+  _getFieldValue(field2) {
     var _a;
-    return (_a = this.formData[this.concept.id]) == null ? void 0 : _a[field.columnId];
+    return (_a = this.formData[this.concept.id]) == null ? void 0 : _a[field2.columnId];
   }
   _handleFieldChange(event) {
     event.stopPropagation();
@@ -2859,20 +3487,25 @@ let JupiterConceptTree = class extends LitElement {
 
       <!-- Input Field Cells (Period Columns) - Only for non-abstract concepts -->
       ${this.columns.map((column2) => {
-      const field = this._getFieldForColumn(column2.id);
-      const shouldShowField = !isAbstract && field;
+      var _a, _b;
+      const field2 = this._getFieldForColumn(column2.id);
+      const shouldShowField = !isAbstract && field2;
+      const storedUnit = (_b = (_a = this.unitData) == null ? void 0 : _a[this.concept.id]) == null ? void 0 : _b[column2.id];
       return html`
           <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""}">
             ${shouldShowField ? html`
               <jupiter-form-field
-                .field="${field}"
+                .field="${field2}"
                 .conceptId="${this.concept.id}"
                 .conceptType="${this.concept.type}"
+                .datatypes="${this.datatypes}"
+                .defaultUnits="${this.defaultUnits}"
                 .columnId="${column2.id}"
-                .value="${this._getFieldValue(field)}"
-                .periodStartDate="${field.periodStartDate || column2.periodStartDate}"
-                .periodEndDate="${field.periodEndDate || column2.periodEndDate}"
-                .periodInstantDate="${field.periodInstantDate || (field.periodType === "instant" ? field.periodEndDate || field.periodStartDate : void 0)}"
+                .value="${this._getFieldValue(field2)}"
+                .unit="${storedUnit || ""}"
+                .periodStartDate="${field2.periodStartDate || column2.periodStartDate}"
+                .periodEndDate="${field2.periodEndDate || column2.periodEndDate}"
+                .periodInstantDate="${field2.periodInstantDate || (field2.periodType === "instant" ? field2.periodEndDate || field2.periodStartDate : void 0)}"
                 .disabled="${this.disabled}"
                 .locale="${this.locale}"
                 .hideLabel="${true}"
@@ -2998,6 +3631,15 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Object })
 ], JupiterConceptTree.prototype, "formData", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], JupiterConceptTree.prototype, "periodData", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], JupiterConceptTree.prototype, "unitData", 2);
+__decorateClass$4([
+  n2({ type: Array })
+], JupiterConceptTree.prototype, "defaultUnits", 2);
 __decorateClass$4([
   n2({ type: Boolean })
 ], JupiterConceptTree.prototype, "disabled", 2);
@@ -3007,6 +3649,9 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Set })
 ], JupiterConceptTree.prototype, "expandedConcepts", 2);
+__decorateClass$4([
+  n2({ type: Array })
+], JupiterConceptTree.prototype, "datatypes", 2);
 __decorateClass$4([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -3061,9 +3706,9 @@ let JupiterAddColumnDialog = class extends LitElement {
     if (!this._isFormValid())
       return;
     const request = {
-      periodType: this.periodType === "mixed" ? this._selectedType : this.periodType
+      periodType: this.periodType === "mixed" ? "duration" : this.periodType
     };
-    if (this.periodType === "instant" || this.periodType === "mixed" && this._selectedType === "instant") {
+    if (this.periodType === "instant") {
       request.instantDate = this._instantDate;
     } else {
       request.startDate = this._startDate;
@@ -3078,13 +3723,7 @@ let JupiterAddColumnDialog = class extends LitElement {
     }));
   }
   _isFormValid() {
-    if (this.periodType === "mixed") {
-      if (this._selectedType === "instant") {
-        return !!this._instantDate;
-      } else {
-        return !!this._startDate && !!this._endDate && this._startDate <= this._endDate;
-      }
-    } else if (this.periodType === "duration") {
+    if (this.periodType === "mixed" || this.periodType === "duration") {
       return !!this._startDate && !!this._endDate && this._startDate <= this._endDate;
     } else if (this.periodType === "instant") {
       return !!this._instantDate;
@@ -3182,22 +3821,7 @@ let JupiterAddColumnDialog = class extends LitElement {
         </div>
 
         <div class="dialog-content">
-          ${this.periodType === "mixed" ? html`
-            <div class="form-group">
-              <label class="form-label required">${I18n.t("column.columnType")}</label>
-              <select 
-                class="form-input"
-                .value="${this._selectedType}"
-                @change="${this._handleSelectedTypeChange}"
-                required
-              >
-                <option value="instant">${I18n.t("column.instantSingleDate")}</option>
-                <option value="duration">${I18n.t("column.durationDates")}</option>
-              </select>
-            </div>
-          ` : ""}
-
-          ${this.periodType === "instant" || this.periodType === "mixed" && this._selectedType === "instant" ? html`
+          ${this.periodType === "instant" ? html`
             <div class="form-group">
               <label class="form-label required">${I18n.t("column.instantDate")}</label>
               <input 
@@ -3624,7 +4248,10 @@ let JupiterFormSection = class extends LitElement {
     super(...arguments);
     this.columns = [];
     this.formData = {};
+    this.periodData = {};
+    this.unitData = {};
     this.typedMemberData = {};
+    this.defaultUnits = [];
     this.disabled = false;
     this.collapsible = true;
     this.locale = "en-US";
@@ -3984,7 +4611,11 @@ let JupiterFormSection = class extends LitElement {
                   <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}"
@@ -4275,12 +4906,24 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: Array })
 ], JupiterFormSection.prototype, "columns", 2);
+__decorateClass$2([
+  n2({ type: Array })
+], JupiterFormSection.prototype, "datatypes", 2);
 __decorateClass$2([
   n2({ type: Object })
 ], JupiterFormSection.prototype, "formData", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "periodData", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "unitData", 2);
 __decorateClass$2([
   n2({ type: Object })
 ], JupiterFormSection.prototype, "typedMemberData", 2);
+__decorateClass$2([
+  n2({ type: Array })
+], JupiterFormSection.prototype, "defaultUnits", 2);
 __decorateClass$2([
   n2({ type: Boolean })
 ], JupiterFormSection.prototype, "disabled", 2);
@@ -4341,10 +4984,17 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this.availableRoles = [];
     this.selectedRoleIds = [];
     this.periodPreferences = {};
+    this.mode = "user";
     this._tempSelectedRoles = /* @__PURE__ */ new Set();
     this._searchQuery = "";
     this._filteredRoles = [];
     this._tempPeriodPreferences = {};
+    this._selectedAvailableRole = null;
+    this._selectedChosenRole = null;
+    this._chosenSearchQuery = "";
+    this._draggedRoleId = null;
+    this._dragOverRoleId = null;
+    this._chosenRoleOrder = [];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -4411,6 +5061,19 @@ let JupiterFilterRolesDialog = class extends LitElement {
       searchInput.focus();
     }
   }
+  _handleChosenSearchInput(event) {
+    const input = event.target;
+    this._chosenSearchQuery = input.value;
+  }
+  _clearChosenSearch() {
+    var _a;
+    this._chosenSearchQuery = "";
+    const searchInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chosen-search-input");
+    if (searchInput) {
+      searchInput.value = "";
+      searchInput.focus();
+    }
+  }
   _highlightSearchTerm(text) {
     if (!this._searchQuery.trim()) {
       return text;
@@ -4427,6 +5090,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
   }
   _initializeTempSelection() {
     this._tempSelectedRoles = new Set(this.selectedRoleIds);
+    this._chosenRoleOrder = [...this.selectedRoleIds];
   }
   _initializePeriodPreferences() {
     const preferences = {};
@@ -4528,10 +5192,20 @@ let JupiterFilterRolesDialog = class extends LitElement {
     }));
   }
   _handleApply() {
-    const selectedRoles = Array.from(this._tempSelectedRoles);
+    const orderedRolesWithMetadata = this._chosenRoleOrder.map((roleId, index) => {
+      var _a;
+      const role = this.availableRoles.find((r2) => r2.id === roleId);
+      return {
+        roleId,
+        roleURI: ((_a = role == null ? void 0 : role.metadata) == null ? void 0 : _a.roleURI) || "",
+        order: index
+      };
+    });
+    console.log("✅ Apply Filter - Enhanced structure being emitted:", orderedRolesWithMetadata);
+    console.log("📋 Order array:", this._chosenRoleOrder);
     this.dispatchEvent(new CustomEvent("roles-filter-apply", {
       detail: {
-        selectedRoleIds: selectedRoles,
+        selectedRoleIds: orderedRolesWithMetadata,
         periodPreferences: this._tempPeriodPreferences
       },
       bubbles: true
@@ -4542,6 +5216,128 @@ let JupiterFilterRolesDialog = class extends LitElement {
       this._handleCancel();
     }
   }
+  // Picklist methods for admin mode
+  _handleAvailableRoleClick(roleId) {
+    this._selectedAvailableRole = roleId;
+    this._selectedChosenRole = null;
+    this.requestUpdate();
+  }
+  _handleChosenRoleClick(roleId) {
+    this._selectedChosenRole = roleId;
+    this._selectedAvailableRole = null;
+    this.requestUpdate();
+  }
+  _moveToChosen() {
+    if (!this._selectedAvailableRole)
+      return;
+    const newSelection = new Set(this._tempSelectedRoles);
+    newSelection.add(this._selectedAvailableRole);
+    this._tempSelectedRoles = newSelection;
+    if (!this._chosenRoleOrder.includes(this._selectedAvailableRole)) {
+      this._chosenRoleOrder = [...this._chosenRoleOrder, this._selectedAvailableRole];
+    }
+    this._selectedAvailableRole = null;
+    this.requestUpdate();
+  }
+  _moveToAvailable() {
+    if (!this._selectedChosenRole)
+      return;
+    const newSelection = new Set(this._tempSelectedRoles);
+    newSelection.delete(this._selectedChosenRole);
+    this._tempSelectedRoles = newSelection;
+    this._chosenRoleOrder = this._chosenRoleOrder.filter((id) => id !== this._selectedChosenRole);
+    this._selectedChosenRole = null;
+    this.requestUpdate();
+  }
+  _moveAllToChosen() {
+    const newSelection = new Set(this._tempSelectedRoles);
+    this._filteredRoles.forEach((role) => {
+      newSelection.add(role.id);
+      if (!this._chosenRoleOrder.includes(role.id)) {
+        this._chosenRoleOrder.push(role.id);
+      }
+    });
+    this._tempSelectedRoles = newSelection;
+    this._selectedAvailableRole = null;
+    this.requestUpdate();
+  }
+  _moveAllToAvailable() {
+    this._tempSelectedRoles = /* @__PURE__ */ new Set();
+    this._chosenRoleOrder = [];
+    this._selectedChosenRole = null;
+    this.requestUpdate();
+  }
+  _getAvailableRoles() {
+    return this._filteredRoles.filter((role) => !this._tempSelectedRoles.has(role.id));
+  }
+  _getChosenRoles() {
+    const chosenRoles = this.availableRoles.filter((role) => this._tempSelectedRoles.has(role.id));
+    const orderedRoles = this._chosenRoleOrder.map((roleId) => chosenRoles.find((role) => role.id === roleId)).filter((role) => role !== void 0);
+    const unorderedRoles = chosenRoles.filter((role) => !this._chosenRoleOrder.includes(role.id));
+    const allOrderedRoles = [...orderedRoles, ...unorderedRoles];
+    if (!this._chosenSearchQuery.trim()) {
+      return allOrderedRoles;
+    }
+    const query = this._chosenSearchQuery.toLowerCase().trim();
+    return allOrderedRoles.filter((role) => {
+      var _a;
+      const titleMatch = role.title.toLowerCase().includes(query);
+      const idMatch = role.id.toLowerCase().includes(query);
+      const descriptionMatch = ((_a = role.description) == null ? void 0 : _a.toLowerCase().includes(query)) || false;
+      const uriMatch = this._searchInRoleURI(role, query);
+      return titleMatch || idMatch || descriptionMatch || uriMatch;
+    });
+  }
+  // Drag and drop handlers
+  _handleDragStart(event, roleId) {
+    this._draggedRoleId = roleId;
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", roleId);
+    }
+    this.requestUpdate();
+  }
+  _handleDragOver(event, roleId) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+    if (this._draggedRoleId && this._draggedRoleId !== roleId) {
+      this._dragOverRoleId = roleId;
+      this.requestUpdate();
+    }
+  }
+  _handleDragLeave(event) {
+    this._dragOverRoleId = null;
+    this.requestUpdate();
+  }
+  _handleDrop(event, targetRoleId) {
+    event.preventDefault();
+    if (!this._draggedRoleId || this._draggedRoleId === targetRoleId) {
+      this._draggedRoleId = null;
+      this._dragOverRoleId = null;
+      this.requestUpdate();
+      return;
+    }
+    const newOrder = [...this._chosenRoleOrder];
+    const draggedIndex = newOrder.indexOf(this._draggedRoleId);
+    const targetIndex = newOrder.indexOf(targetRoleId);
+    if (draggedIndex !== -1 && targetIndex !== -1) {
+      newOrder.splice(draggedIndex, 1);
+      const newTargetIndex = draggedIndex < targetIndex ? targetIndex - 1 : targetIndex;
+      newOrder.splice(newTargetIndex, 0, this._draggedRoleId);
+      this._chosenRoleOrder = newOrder;
+      console.log("🔄 Reordered roles:", this._chosenRoleOrder);
+    }
+    this._draggedRoleId = null;
+    this._dragOverRoleId = null;
+    this.requestUpdate();
+  }
+  _handleDragEnd(event) {
+    this._draggedRoleId = null;
+    this._dragOverRoleId = null;
+    this.requestUpdate();
+  }
   render() {
     const selectedCount = this._tempSelectedRoles.size;
     const totalCount = this.availableRoles.length;
@@ -4560,6 +5356,152 @@ let JupiterFilterRolesDialog = class extends LitElement {
 
         <!-- Dialog Content -->
         <div class="dialog-content">
+          ${this.mode === "admin" ? html`
+            <!-- Admin Mode: Picklist Layout -->
+            <div class="picklist-container">
+              <!-- Available Roles Panel -->
+              <div class="picklist-panel">
+                <div class="picklist-header">
+                  Available Roles (${this._getAvailableRoles().length})
+                </div>
+                <div class="picklist-search">
+                  <div class="search-container">
+                    <input
+                      type="text"
+                      class="search-input"
+                      placeholder="${I18n.t("filter.searchPlaceholder")}"
+                      .value="${this._searchQuery}"
+                      @input="${this._handleSearchInput}"
+                    />
+                    ${this._searchQuery ? html`
+                      <button class="clear-search" @click="${this._clearSearch}" title="${I18n.t("filter.clearSearch")}">
+                        ×
+                      </button>
+                    ` : html`
+                      <svg class="search-icon" viewBox="0 0 24 24">
+                        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                      </svg>
+                    `}
+                  </div>
+                </div>
+                <div class="picklist-list">
+                  ${this._getAvailableRoles().map((role) => {
+      var _a;
+      return html`
+                    <div 
+                      class="picklist-item ${this._selectedAvailableRole === role.id ? "selected" : ""}"
+                      @click="${() => this._handleAvailableRoleClick(role.id)}"
+                      @dblclick="${() => {
+        this._handleAvailableRoleClick(role.id);
+        this._moveToChosen();
+      }}"
+                    >
+                      <div class="picklist-item-label">${role.title}</div>
+                      ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
+                        <div class="picklist-item-value">${role.metadata.roleURI}</div>
+                      ` : ""}
+                    </div>
+                  `;
+    })}
+                </div>
+                <div class="picklist-count">
+                  ${this._getAvailableRoles().length} role(s)
+                </div>
+              </div>
+
+              <!-- Control Buttons -->
+              <div class="picklist-controls">
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveToChosen}"
+                  ?disabled="${!this._selectedAvailableRole}"
+                  title="Add selected role"
+                >
+                  ›
+                </button>
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveAllToChosen}"
+                  ?disabled="${this._getAvailableRoles().length === 0}"
+                  title="Add all roles"
+                >
+                  »
+                </button>
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveToAvailable}"
+                  ?disabled="${!this._selectedChosenRole}"
+                  title="Remove selected role"
+                >
+                  ‹
+                </button>
+                <button 
+                  class="picklist-button"
+                  @click="${this._moveAllToAvailable}"
+                  ?disabled="${this._tempSelectedRoles.size === 0}"
+                  title="Remove all roles"
+                >
+                  «
+                </button>
+              </div>
+
+              <!-- Chosen Roles Panel -->
+              <div class="picklist-panel">
+                <div class="picklist-header">
+                  Chosen Roles (${this._tempSelectedRoles.size})
+                </div>
+                <div class="picklist-search">
+                  <div class="search-container">
+                    <input
+                      type="text"
+                      class="search-input chosen-search-input"
+                      placeholder="${I18n.t("filter.searchPlaceholder")}"
+                      .value="${this._chosenSearchQuery}"
+                      @input="${this._handleChosenSearchInput}"
+                    />
+                    ${this._chosenSearchQuery ? html`
+                      <button class="clear-search" @click="${this._clearChosenSearch}" title="${I18n.t("filter.clearSearch")}">
+                        ×
+                      </button>
+                    ` : html`
+                      <svg class="search-icon" viewBox="0 0 24 24">
+                        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                      </svg>
+                    `}
+                  </div>
+                </div>
+                <div class="picklist-list">
+                  ${this._getChosenRoles().map((role) => {
+      var _a;
+      return html`
+                    <div 
+                      class="picklist-item ${this._selectedChosenRole === role.id ? "selected" : ""} ${this._draggedRoleId === role.id ? "dragging" : ""} ${this._dragOverRoleId === role.id ? "drag-over" : ""}"
+                      draggable="true"
+                      @click="${() => this._handleChosenRoleClick(role.id)}"
+                      @dblclick="${() => {
+        this._handleChosenRoleClick(role.id);
+        this._moveToAvailable();
+      }}"
+                      @dragstart="${(e2) => this._handleDragStart(e2, role.id)}"
+                      @dragover="${(e2) => this._handleDragOver(e2, role.id)}"
+                      @dragleave="${(e2) => this._handleDragLeave(e2)}"
+                      @drop="${(e2) => this._handleDrop(e2, role.id)}"
+                      @dragend="${(e2) => this._handleDragEnd(e2)}"
+                    >
+                      <div class="picklist-item-label">${role.title}</div>
+                      ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
+                        <div class="picklist-item-value">${role.metadata.roleURI}</div>
+                      ` : ""}
+                    </div>
+                  `;
+    })}
+                </div>
+                <div class="picklist-count">
+                  ${this._tempSelectedRoles.size} role(s) selected
+                </div>
+              </div>
+            </div>
+          ` : html`
           <p class="description">
             ${I18n.t("filter.description")}
           </p>
@@ -4671,8 +5613,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
     })}
             `}
           </div>
-
-        
+          `}
         </div>
 
         <!-- Dialog Actions -->
@@ -5017,6 +5958,126 @@ JupiterFilterRolesDialog.styles = css`
       opacity: 0.6;
       cursor: not-allowed;
     }
+
+    /* Picklist Styles for Admin Mode */
+    .picklist-container {
+      display: flex;
+      gap: 16px;
+      height: 500px;
+    }
+
+    .picklist-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .picklist-header {
+      padding: 12px;
+      background: var(--jupiter-background-light, #f8f9fa);
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      font-weight: 600;
+      color: var(--jupiter-text-primary, #333);
+      font-size: 14px;
+    }
+
+    .picklist-search {
+      padding: 12px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .picklist-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+    }
+
+    .picklist-item {
+      padding: 10px 12px;
+      margin-bottom: 4px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      background: var(--jupiter-background, #fff);
+    }
+
+    .picklist-item:hover {
+      background: var(--jupiter-hover-background, #f5f5f5);
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .picklist-item.selected {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .picklist-item.dragging {
+      opacity: 0.5;
+      cursor: move;
+    }
+
+    .picklist-item.drag-over {
+      border-top: 3px solid var(--jupiter-primary-color, #1976d2);
+      margin-top: 3px;
+    }
+
+    .picklist-item[draggable="true"] {
+      cursor: move;
+    }
+
+    .picklist-item-label {
+      font-weight: 500;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .picklist-item-value {
+      font-size: 11px;
+      opacity: 0.8;
+      word-break: break-all;
+    }
+
+    .picklist-controls {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 8px;
+      padding: 0 8px;
+    }
+
+    .picklist-button {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: background-color 0.2s ease;
+    }
+
+    .picklist-button:hover:not(:disabled) {
+      background: var(--jupiter-primary-color-dark, #1565c0);
+    }
+
+    .picklist-button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .picklist-count {
+      padding: 8px 12px;
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      background: var(--jupiter-background-light, #f8f9fa);
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      text-align: center;
+    }
   `;
 __decorateClass$1([
   n2({ type: Boolean, reflect: true })
@@ -5030,6 +6091,9 @@ __decorateClass$1([
 __decorateClass$1([
   n2({ type: Object })
 ], JupiterFilterRolesDialog.prototype, "periodPreferences", 2);
+__decorateClass$1([
+  n2({ type: String })
+], JupiterFilterRolesDialog.prototype, "mode", 2);
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_tempSelectedRoles", 2);
@@ -5042,6 +6106,24 @@ __decorateClass$1([
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_tempPeriodPreferences", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_selectedAvailableRole", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_selectedChosenRole", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_chosenSearchQuery", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_draggedRoleId", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_dragOverRoleId", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_chosenRoleOrder", 2);
 JupiterFilterRolesDialog = __decorateClass$1([
   t$1("jupiter-filter-roles-dialog")
 ], JupiterFilterRolesDialog);
@@ -5069,11 +6151,14 @@ let JupiterDynamicForm = class extends LitElement {
     this.display = "accordion";
     this.mode = "inputForm";
     this.financialStatementsTypeAxis = [];
+    this.defaultUnits = [];
     this._formData = {};
     this._draftLoaded = false;
     this._preservedFormData = {};
     this._periodData = {};
     this._preservedPeriodData = {};
+    this._unitData = {};
+    this._preservedUnitData = {};
     this._typedMemberData = {};
     this._preservedTypedMemberData = {};
     this._columns = [];
@@ -5082,6 +6167,8 @@ let JupiterDynamicForm = class extends LitElement {
     this._dirty = false;
     this._valid = true;
     this._submitted = false;
+    this._xbrlFormErrors = [];
+    this._showErrorPopup = false;
     this._allSections = [];
     this._selectedRoleIds = [];
     this._showFilterDialog = false;
@@ -5100,6 +6187,17 @@ let JupiterDynamicForm = class extends LitElement {
       console.log(`🌍 [GLOBAL DynamicForm] Event detail:`, customEvent.detail);
       this._handlePeriodChange(customEvent);
     });
+    this.addEventListener("unit-change", (e2) => {
+      console.log(`🏷️ [GLOBAL DynamicForm] Caught unit-change event on element:`, e2);
+      const customEvent = e2;
+      console.log(`🏷️ [GLOBAL DynamicForm] Event detail:`, customEvent.detail);
+      this._handleUnitChange(customEvent);
+    });
+    this.addEventListener("field-blur", (e2) => {
+      console.log("🚨 [DynamicForm] field-blur event listener triggered!", e2);
+      const customEvent = e2;
+      this._handleFieldBlur(customEvent);
+    });
     this._initializeForm();
   }
   updated(changedProperties) {
@@ -5109,10 +6207,46 @@ let JupiterDynamicForm = class extends LitElement {
     if (changedProperties.has("financialStatementsTypeAxis")) {
       console.log("🔄 financialStatementsTypeAxis changed:", this.financialStatementsTypeAxis);
     }
+    if ((changedProperties.has("xbrlInput") || changedProperties.has("defaultUnits")) && this.xbrlInput && this.defaultUnits && this.defaultUnits.length > 0) {
+      this._applyDefaultUnitsToDatatypes();
+    }
     if (changedProperties.has("xbrlInput") || changedProperties.has("schema") || changedProperties.has("language") || changedProperties.has("periodStartDate") || changedProperties.has("periodEndDate") || changedProperties.has("financialStatementsTypeAxis")) {
       this._initializeForm();
     }
   }
+  /**
+   * Apply developer-provided default units to datatypes by setting isDefault=true
+   * This allows units to be auto-selected for derived types (e.g., nl-types:monetaryNoDecimals20ItemType)
+   */
+  _applyDefaultUnitsToDatatypes() {
+    var _a;
+    if (!((_a = this.xbrlInput) == null ? void 0 : _a.datatypes) || !this.defaultUnits || this.defaultUnits.length === 0) {
+      return;
+    }
+    console.log("🔧 [DynamicForm] Applying defaultUnits to datatypes:", this.defaultUnits);
+    const datatypesArray = Array.isArray(this.xbrlInput.datatypes) ? this.xbrlInput.datatypes : this.xbrlInput.datatypes.concepts;
+    if (!datatypesArray || datatypesArray.length === 0) {
+      console.warn("⚠️ [DynamicForm] No datatypes found to apply defaults to");
+      return;
+    }
+    this.defaultUnits.forEach((defaultUnitMap) => {
+      Object.entries(defaultUnitMap).forEach(([datatypeId, unitId]) => {
+        const datatype = datatypesArray.find((dt) => dt.type === datatypeId || dt.id === datatypeId);
+        if (datatype && datatype.units && datatype.units.length > 0) {
+          const targetUnit = datatype.units.find((u2) => u2.id === unitId);
+          if (targetUnit) {
+            datatype.units.forEach((u2) => u2.isDefault = false);
+            targetUnit.isDefault = true;
+            console.log(`✅ [DynamicForm] Set isDefault=true for unit "${unitId}" in datatype "${datatypeId}"`);
+          } else {
+            console.warn(`⚠️ [DynamicForm] Unit "${unitId}" not found in datatype "${datatypeId}"`);
+          }
+        } else {
+          console.warn(`⚠️ [DynamicForm] Datatype "${datatypeId}" not found or has no units`);
+        }
+      });
+    });
+  }
   _initializeForm() {
     var _a;
     if (!this._draftStorageService) {
@@ -5155,8 +6289,8 @@ let JupiterDynamicForm = class extends LitElement {
             removable: false
           }
         ];
-      } catch (error) {
-        console.error("❌ Error building form from XBRL input:", error);
+      } catch (error2) {
+        console.error("❌ Error building form from XBRL input:", error2);
         this._currentSchema = this._getDefaultSchema();
         this._allSections = [];
         this._selectedRoleIds = [];
@@ -5230,11 +6364,26 @@ let JupiterDynamicForm = class extends LitElement {
     });
     this._periodPreferences = preferences;
   }
+  /**
+   * Helper method to extract roleIds from _selectedRoleIds
+   * Handles both legacy string[] and enhanced object[] structure
+   */
+  _getRoleIdsArray() {
+    if (!Array.isArray(this._selectedRoleIds) || this._selectedRoleIds.length === 0) {
+      return [];
+    }
+    if (typeof this._selectedRoleIds[0] === "string") {
+      return this._selectedRoleIds;
+    } else {
+      return this._selectedRoleIds.map((item) => item.roleId);
+    }
+  }
   _applyRoleFilter() {
     if (!this._currentSchema || !this._allSections.length)
       return;
-    console.log(`🔍 Applying role filter: ${this._selectedRoleIds.length} selected out of ${this._allSections.length} total`);
-    if (this._selectedRoleIds.length === 0) {
+    const roleIds = this._getRoleIdsArray();
+    console.log(`🔍 Applying role filter: ${roleIds.length} selected out of ${this._allSections.length} total`);
+    if (roleIds.length === 0) {
       console.log(`📝 No roles selected - showing empty form`);
       this._currentSchema = {
         ...this._currentSchema,
@@ -5245,17 +6394,38 @@ let JupiterDynamicForm = class extends LitElement {
     }
     this._preserveDataForHiddenSections();
     const filteredSections = this._allSections.filter(
-      (section2) => this._selectedRoleIds.includes(section2.id)
+      (section2) => roleIds.includes(section2.id)
     );
-    console.log(`📊 Filtered sections: ${filteredSections.length} (IDs: ${filteredSections.map((s2) => s2.id).join(", ")})`);
-    this._restoreDataForVisibleSections(filteredSections);
+    const orderedSections = this._sortSectionsByCustomOrder(filteredSections);
+    console.log(`📊 Filtered sections: ${orderedSections.length}`);
+    console.log(`📋 Custom order applied:`, orderedSections.map((s2) => s2.title));
+    this._restoreDataForVisibleSections(orderedSections);
     this._currentSchema = {
       ...this._currentSchema,
-      sections: filteredSections
+      sections: orderedSections
     };
-    console.log(`✅ Schema updated. Current sections count: ${this._currentSchema.sections.length}`);
+    console.log(`✅ Schema updated with custom order. Current sections count: ${this._currentSchema.sections.length}`);
     this.requestUpdate();
   }
+  /**
+   * Sort sections according to custom order from _selectedRoleIds
+   * Handles both enhanced structure and legacy string array
+   */
+  _sortSectionsByCustomOrder(sections) {
+    if (Array.isArray(this._selectedRoleIds) && this._selectedRoleIds.length > 0 && typeof this._selectedRoleIds[0] === "object") {
+      const enhancedRoles = this._selectedRoleIds;
+      const orderMap = /* @__PURE__ */ new Map();
+      enhancedRoles.forEach((role) => {
+        orderMap.set(role.roleId, role.order);
+      });
+      return [...sections].sort((a2, b2) => {
+        const orderA = orderMap.get(a2.id) ?? 999;
+        const orderB = orderMap.get(b2.id) ?? 999;
+        return orderA - orderB;
+      });
+    }
+    return sections;
+  }
   /**
    * Filter roles based on financialStatementsTypeAxis property
    * Rules:
@@ -5326,8 +6496,9 @@ let JupiterDynamicForm = class extends LitElement {
   _preserveDataForHiddenSections() {
     var _a;
     const currentlyVisibleSectionIds = ((_a = this._currentSchema) == null ? void 0 : _a.sections.map((s2) => s2.id)) || [];
+    const selectedRoleIds = this._getRoleIdsArray();
     const sectionsThatWillBeHidden = currentlyVisibleSectionIds.filter(
-      (sectionId) => !this._selectedRoleIds.includes(sectionId)
+      (sectionId) => !selectedRoleIds.includes(sectionId)
     );
     sectionsThatWillBeHidden.forEach((sectionId) => {
       const section2 = this._allSections.find((s2) => s2.id === sectionId);
@@ -5351,9 +6522,9 @@ let JupiterDynamicForm = class extends LitElement {
     if (this._formData[concept.id]) {
       this._preservedFormData[concept.id] = { ...this._formData[concept.id] };
     }
-    concept.fields.forEach((field) => {
-      if (this._typedMemberData[field.columnId]) {
-        this._preservedTypedMemberData[field.columnId] = { ...this._typedMemberData[field.columnId] };
+    concept.fields.forEach((field2) => {
+      if (this._typedMemberData[field2.columnId]) {
+        this._preservedTypedMemberData[field2.columnId] = { ...this._typedMemberData[field2.columnId] };
       }
     });
     if (concept.children) {
@@ -5371,9 +6542,9 @@ let JupiterDynamicForm = class extends LitElement {
     if (this._preservedFormData[concept.id]) {
       this._formData[concept.id] = { ...this._preservedFormData[concept.id] };
     }
-    concept.fields.forEach((field) => {
-      if (this._preservedTypedMemberData[field.columnId]) {
-        this._typedMemberData[field.columnId] = { ...this._preservedTypedMemberData[field.columnId] };
+    concept.fields.forEach((field2) => {
+      if (this._preservedTypedMemberData[field2.columnId]) {
+        this._typedMemberData[field2.columnId] = { ...this._preservedTypedMemberData[field2.columnId] };
       }
     });
     if (concept.children) {
@@ -5390,7 +6561,8 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleFilterDialogCancel() {
     this._showFilterDialog = false;
-    console.log(`🚫 Filter dialog cancelled. Current selection: ${this._selectedRoleIds.length}/${this._allSections.length}`);
+    const roleCount = this._getRoleIdsArray().length;
+    console.log(`🚫 Filter dialog cancelled. Current selection: ${roleCount}/${this._allSections.length}`);
   }
   _handleRoleFilterApply(event) {
     const { selectedRoleIds, periodPreferences } = event.detail;
@@ -5406,9 +6578,12 @@ let JupiterDynamicForm = class extends LitElement {
         this.periodEndDate,
         this.language,
         this._selectedRoleIds,
+        // Enhanced structure with roleURI and order
         this._allSections,
         this._typedMemberData,
-        this._periodPreferences
+        this._periodPreferences,
+        this._periodData,
+        this._unitData
       );
       this._draftStorageService.saveDraft(currentFormData, currentMetadata);
       console.log("✅ Current form data saved to draft storage");
@@ -5418,19 +6593,22 @@ let JupiterDynamicForm = class extends LitElement {
       console.log("📥 Restoring form data from draft after reinitialization...");
       this._loadDraftIfExists().then(() => {
         console.log("✅ Form data restored successfully after reinitialization");
-      }).catch((error) => {
-        console.error("❌ Error restoring form data after reinitialization:", error);
+      }).catch((error2) => {
+        console.error("❌ Error restoring form data after reinitialization:", error2);
       });
     } else {
       this._applyRoleFilter();
     }
     this._showFilterDialog = false;
-    console.log(`🎯 Applied role filter: ${selectedRoleIds.length}/${this._allSections.length} roles selected`);
+    const roleCount = Array.isArray(this._selectedRoleIds) && this._selectedRoleIds.length > 0 ? typeof this._selectedRoleIds[0] === "string" ? this._selectedRoleIds.length : this._selectedRoleIds.length : 0;
+    console.log(`🎯 Applied role filter: ${roleCount}/${this._allSections.length} roles selected`);
+    console.log("📋 Enhanced selectedRoleIds structure:", this._selectedRoleIds);
     this.dispatchEvent(new CustomEvent("roles-filter-changed", {
       detail: {
         selectedRoleIds,
+        // Enhanced structure with roleURI and order
         totalRoles: this._allSections.length,
-        visibleRoles: selectedRoleIds.length,
+        visibleRoles: roleCount,
         periodPreferences
       },
       bubbles: true
@@ -5444,15 +6622,15 @@ let JupiterDynamicForm = class extends LitElement {
       return;
     for (const section2 of schema.sections) {
       for (const concept of section2.concepts) {
-        for (const field of concept.fields) {
-          const value = (_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId];
+        for (const field2 of concept.fields) {
+          const value = (_a = this._formData[concept.id]) == null ? void 0 : _a[field2.columnId];
           const fieldErrors = FormValidator.validateField(
-            field.id,
+            field2.id,
             concept.id,
-            field.columnId,
+            field2.columnId,
             value,
-            field.type,
-            field.validation || []
+            field2.type,
+            field2.validation || []
           );
           errors.push(...fieldErrors);
         }
@@ -5484,8 +6662,8 @@ let JupiterDynamicForm = class extends LitElement {
   _handlePeriodChange(event) {
     console.log(`🎯 [DynamicForm] _handlePeriodChange called with event:`, event);
     console.log(`🎯 [DynamicForm] Event detail:`, event.detail);
-    const { conceptId, columnId, periodType, periodStartDate, periodEndDate, periodInstantDate } = event.detail;
-    console.log(`📅 Period change received: conceptId=${conceptId}, columnId=${columnId}, periodType=${periodType}, startDate=${periodStartDate}, endDate=${periodEndDate}, instantDate=${periodInstantDate}`);
+    const { conceptId, columnId, periodType, periodStartDate, periodEndDate, periodInstantDate, unit } = event.detail;
+    console.log(`📅 Period change received: conceptId=${conceptId}, columnId=${columnId}, periodType=${periodType}, startDate=${periodStartDate}, endDate=${periodEndDate}, instantDate=${periodInstantDate}, unit=${unit}`);
     const updatedPeriodData = { ...this._periodData };
     if (!updatedPeriodData[conceptId]) {
       updatedPeriodData[conceptId] = {};
@@ -5501,9 +6679,37 @@ let JupiterDynamicForm = class extends LitElement {
     this._periodData = updatedPeriodData;
     console.log(`💾 Period data stored for [${conceptId}][${columnId}]:`, this._periodData[conceptId][columnId]);
     console.log(`📦 Full period data state:`, JSON.stringify(this._periodData, null, 2));
+    if (unit) {
+      this._storeUnit(conceptId, columnId, unit);
+    }
+    this._dirty = true;
+    this.requestUpdate();
+  }
+  _handleUnitChange(event) {
+    console.log(`🏷️ [DynamicForm] _handleUnitChange called with event:`, event);
+    console.log(`🏷️ [DynamicForm] Event detail:`, event.detail);
+    const { conceptId, columnId, unit } = event.detail;
+    console.log(`🏷️ Unit change received: conceptId=${conceptId}, columnId=${columnId}, unit=${unit}`);
+    this._storeUnit(conceptId, columnId, unit);
     this._dirty = true;
     this.requestUpdate();
   }
+  _storeUnit(conceptId, columnId, unit) {
+    console.log(`🔧 [_storeUnit] Called with conceptId=${conceptId}, columnId=${columnId}, unit=${unit}`);
+    console.log(`🔧 [_storeUnit] Current _unitData before update:`, JSON.stringify(this._unitData, null, 2));
+    const updatedUnitData = { ...this._unitData };
+    if (!updatedUnitData[conceptId]) {
+      console.log(`🔧 [_storeUnit] Creating new entry for conceptId: ${conceptId}`);
+      updatedUnitData[conceptId] = {};
+    }
+    updatedUnitData[conceptId] = {
+      ...updatedUnitData[conceptId],
+      [columnId]: unit
+    };
+    this._unitData = updatedUnitData;
+    console.log(`💾 [_storeUnit] Unit data stored for [${conceptId}][${columnId}]:`, this._unitData[conceptId][columnId]);
+    console.log(`📦 [_storeUnit] Full unit data state after update:`, JSON.stringify(this._unitData, null, 2));
+  }
   /**
    * Generate a unique concept key that includes section context
    */
@@ -5533,6 +6739,164 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleFieldBlur(event) {
+    var _a;
+    console.log(`🟧 [DynamicForm] _handleFieldBlur received event:`, event);
+    console.log(`🟧 [DynamicForm] Event detail:`, event.detail);
+    const { fieldId, conceptId, columnId, xbrlValidationErrors } = event.detail;
+    console.log(`🟧 [DynamicForm] Extracted - fieldId: ${fieldId}, conceptId: ${conceptId}, columnId: ${columnId}`);
+    console.log(`🟧 [DynamicForm] xbrlValidationErrors:`, xbrlValidationErrors);
+    let sectionId = "";
+    const path = event.composedPath();
+    console.log(`🟧 [DynamicForm] Event path length: ${path.length}`);
+    for (const element of path) {
+      const el = element;
+      if (el.tagName === "JUPITER-FORM-SECTION") {
+        sectionId = el.getAttribute("section-id") || "";
+        console.log(`🟧 [DynamicForm] Found section element with id: ${sectionId}`);
+        break;
+      }
+    }
+    console.log(`🟧 [DynamicForm] Found sectionId: ${sectionId}`);
+    console.log(`🟧 [DynamicForm] Processing errors - has errors: ${xbrlValidationErrors && xbrlValidationErrors.length > 0}`);
+    if (xbrlValidationErrors && xbrlValidationErrors.length > 0) {
+      console.log(`🟧 [DynamicForm] Adding/updating error for fieldId: ${fieldId}, sectionId: ${sectionId}`);
+      const value = ((_a = this._formData[conceptId]) == null ? void 0 : _a[columnId]) || "";
+      const existingIndex = this._xbrlFormErrors.findIndex(
+        (e2) => e2.fieldId === fieldId && e2.sectionId === sectionId
+      );
+      const newError = {
+        sectionId,
+        fieldId,
+        conceptId,
+        columnId,
+        value,
+        errors: xbrlValidationErrors
+      };
+      console.log(`🟧 [DynamicForm] New error object:`, newError);
+      console.log(`🟧 [DynamicForm] Existing index: ${existingIndex}`);
+      if (existingIndex >= 0) {
+        this._xbrlFormErrors = [
+          ...this._xbrlFormErrors.slice(0, existingIndex),
+          newError,
+          ...this._xbrlFormErrors.slice(existingIndex + 1)
+        ];
+        console.log(`🟧 [DynamicForm] Updated existing error at index ${existingIndex}`);
+      } else {
+        this._xbrlFormErrors = [...this._xbrlFormErrors, newError];
+        console.log(`🟧 [DynamicForm] Added new error`);
+      }
+    } else {
+      console.log(`🟧 [DynamicForm] Removing error (if exists) for fieldId: ${fieldId}, sectionId: ${sectionId}`);
+      const beforeLength = this._xbrlFormErrors.length;
+      this._xbrlFormErrors = this._xbrlFormErrors.filter(
+        (e2) => !(e2.fieldId === fieldId && e2.sectionId === sectionId)
+      );
+      console.log(`🟧 [DynamicForm] Removed ${beforeLength - this._xbrlFormErrors.length} errors`);
+    }
+    console.log(`🔍 [Validation] Total errors: ${this._xbrlFormErrors.length}`, this._xbrlFormErrors);
+  }
+  _getSectionTitle(sectionId) {
+    console.log(`🔍 [_getSectionTitle] Looking for sectionId: "${sectionId}"`);
+    console.log(`🔍 [_getSectionTitle] Available sections:`, this._allSections.map((s2) => ({ id: s2.id, title: s2.title })));
+    const section2 = this._allSections.find((s2) => s2.id === sectionId);
+    const result = (section2 == null ? void 0 : section2.title) || sectionId || "(Unknown Section)";
+    console.log(`🔍 [_getSectionTitle] Result: "${result}"`);
+    return result;
+  }
+  async _handleErrorFieldClick(conceptId, columnId, sectionId) {
+    var _a, _b, _c, _d;
+    console.log(`🎯 [Error Click] Attempting to focus field: ${conceptId}__${columnId} in section: ${sectionId}`);
+    this._showErrorPopup = false;
+    this.requestUpdate();
+    await this.updateComplete;
+    if (this.display === "sidePanel" && this._activeSidePanelRoleId !== sectionId) {
+      console.log(`🔀 Switching to section: ${sectionId} (currently on: ${this._activeSidePanelRoleId})`);
+      this._activeSidePanelRoleId = sectionId;
+      this.requestUpdate();
+      await this.updateComplete;
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+    const sectionElements = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("jupiter-form-section");
+    let targetSection = null;
+    sectionElements == null ? void 0 : sectionElements.forEach((sectionEl) => {
+      var _a2;
+      if (((_a2 = sectionEl.section) == null ? void 0 : _a2.id) === sectionId) {
+        targetSection = sectionEl;
+      }
+    });
+    if (!targetSection) {
+      console.warn(`⚠️ Section not found: ${sectionId}`);
+      return;
+    }
+    console.log(`✅ Found section element:`, targetSection);
+    if ((_b = targetSection.section) == null ? void 0 : _b.collapsed) {
+      console.log(`📂 Expanding collapsed section`);
+      targetSection.section.collapsed = false;
+      targetSection.requestUpdate();
+      await targetSection.updateComplete;
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    } else {
+      await targetSection.updateComplete;
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+    console.log(`🔍 Section shadow DOM exists: ${!!targetSection.shadowRoot}`);
+    if (targetSection.shadowRoot) {
+      console.log(`🔍 Shadow DOM innerHTML length: ${((_c = targetSection.shadowRoot.innerHTML) == null ? void 0 : _c.length) || 0}`);
+      const allElements = targetSection.shadowRoot.querySelectorAll("*");
+      console.log(`🔍 Total elements in shadow DOM: ${allElements.length}`);
+      const customElements2 = Array.from(allElements).filter((el) => {
+        const element = el;
+        return !!(element.tagName && element.tagName.includes("-"));
+      });
+      console.log(`🔍 Custom elements found:`, customElements2.map((el) => el.tagName).join(", "));
+    }
+    const fieldId = `${conceptId}_${columnId}_field`;
+    console.log(`🔍 Looking for input with fieldId: ${fieldId}`);
+    console.log(`🔍 Looking for field with conceptId: ${conceptId} AND columnId: ${columnId}`);
+    const conceptTrees = (_d = targetSection.shadowRoot) == null ? void 0 : _d.querySelectorAll("jupiter-concept-tree");
+    let targetInput = null;
+    console.log(`🔍 Found ${(conceptTrees == null ? void 0 : conceptTrees.length) || 0} concept-tree elements`);
+    if (conceptTrees) {
+      conceptTrees.forEach((conceptTree, treeIndex) => {
+        var _a2;
+        if (targetInput)
+          return;
+        const formFieldsInTree = (_a2 = conceptTree.shadowRoot) == null ? void 0 : _a2.querySelectorAll("jupiter-form-field");
+        console.log(`🔍 Concept tree ${treeIndex}: Found ${(formFieldsInTree == null ? void 0 : formFieldsInTree.length) || 0} form-field elements`);
+        formFieldsInTree == null ? void 0 : formFieldsInTree.forEach((fieldEl, fieldIndex) => {
+          var _a3;
+          if (targetInput)
+            return;
+          console.log(`  Field ${fieldIndex}: conceptId=${fieldEl.conceptId}, columnId=${fieldEl.columnId}`);
+          if (fieldEl.conceptId === conceptId && fieldEl.columnId === columnId) {
+            const inputEl = (_a3 = fieldEl.shadowRoot) == null ? void 0 : _a3.querySelector("input, textarea");
+            console.log(`  -> Matched! Input element found: ${!!inputEl}`);
+            if (inputEl) {
+              targetInput = inputEl;
+              console.log(`✅ Found input element in form-field`);
+            }
+          }
+        });
+      });
+    }
+    if (!targetInput) {
+      console.warn(`⚠️ Input field not found for: ${fieldId}`);
+      return;
+    }
+    const input = targetInput;
+    targetSection.scrollIntoView({ behavior: "smooth", block: "start" });
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    input.focus();
+    if (input.tagName === "INPUT" || input.tagName === "TEXTAREA") {
+      input.select();
+    }
+    input.style.boxShadow = "0 0 0 3px rgba(220, 38, 38, 0.5)";
+    setTimeout(() => {
+      input.style.boxShadow = "";
+    }, 2e3);
+    console.log(`✅ Successfully focused field: ${conceptId}__${columnId}`);
+  }
   _handleSectionExpand(event) {
     this.dispatchEvent(new CustomEvent("section-expand", {
       detail: event.detail,
@@ -5798,7 +7162,7 @@ let JupiterDynamicForm = class extends LitElement {
         delete this._formData[concept.id][columnId];
       }
       if (concept.fields) {
-        concept.fields = concept.fields.filter((field) => field.columnId !== columnId);
+        concept.fields = concept.fields.filter((field2) => field2.columnId !== columnId);
       }
       if (concept.children) {
         this._removeColumnDataFromConcepts(concept.children, columnId);
@@ -5809,7 +7173,8 @@ let JupiterDynamicForm = class extends LitElement {
     if (concept.abstract) {
       return false;
     }
-    if (concept.periodType) {
+    const isDimensionColumn = request.selectedDimensions && request.selectedDimensions.length > 0;
+    if (!isDimensionColumn && concept.periodType) {
       if (request.periodType === "instant" && concept.periodType !== "instant") {
         return false;
       }
@@ -5833,9 +7198,9 @@ let JupiterDynamicForm = class extends LitElement {
       var _a;
       if (this._shouldCreateFieldForConcept(concept, request)) {
         const existingField = (_a = concept.fields) == null ? void 0 : _a[0];
-        let field;
+        let field2;
         if (existingField) {
-          field = {
+          field2 = {
             id: `${concept.id}_${columnId}`,
             conceptId: concept.id,
             columnId,
@@ -5848,13 +7213,15 @@ let JupiterDynamicForm = class extends LitElement {
             defaultValue: existingField.defaultValue,
             periodType: concept.periodType,
             // Add periodType from concept
+            conceptType: concept.type,
+            // CRITICAL: Include conceptType for XBRL validation
             // Set period dates from the add column request
             periodStartDate: request.periodType === "instant" ? request.instantDate : request.startDate,
             periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate,
             periodInstantDate: concept.periodType === "instant" ? request.instantDate || request.startDate : void 0
           };
         } else {
-          field = {
+          field2 = {
             id: `${concept.id}_${columnId}`,
             conceptId: concept.id,
             columnId,
@@ -5867,6 +7234,8 @@ let JupiterDynamicForm = class extends LitElement {
             defaultValue: "",
             periodType: concept.periodType,
             // Add periodType from concept
+            conceptType: concept.type,
+            // CRITICAL: Include conceptType for XBRL validation
             // Set period dates from the add column request
             periodStartDate: request.periodType === "instant" ? request.instantDate : request.startDate,
             periodEndDate: request.periodType === "instant" ? request.instantDate : request.endDate,
@@ -5876,7 +7245,7 @@ let JupiterDynamicForm = class extends LitElement {
         if (!concept.fields) {
           concept.fields = [];
         }
-        concept.fields.push(field);
+        concept.fields.push(field2);
       }
       if (concept.children) {
         this._replicateFieldsForSection(concept.children, columnId, request, formBuilder);
@@ -5915,6 +7284,10 @@ let JupiterDynamicForm = class extends LitElement {
     this._validateForm();
     const submissionData = this._generateSubmissionData();
     console.log("📊 Form Submission Data:", JSON.stringify(submissionData, null, 2));
+    console.log("📊 Submission Data Summary:");
+    submissionData.forEach((entry, index) => {
+      console.log(`  [${index}] conceptId: ${entry.conceptId}, columnId: ${entry.columnId}, value: ${entry.value}, unit: ${entry.unit || "none"}`);
+    });
     this.dispatchEvent(new CustomEvent("form-submit", {
       detail: {
         data: this._formData,
@@ -5927,24 +7300,39 @@ let JupiterDynamicForm = class extends LitElement {
     console.log("✅ Form submit event dispatched");
   }
   _handleSaveDraft() {
+    console.log(`🔵 [Save Draft] Checking for errors...`);
+    console.log(`🔵 [Save Draft] _xbrlFormErrors.length: ${this._xbrlFormErrors.length}`);
+    console.log(`🔵 [Save Draft] _xbrlFormErrors:`, this._xbrlFormErrors);
+    if (this._xbrlFormErrors.length > 0) {
+      console.log("❌ [Save Draft] Cannot save - validation errors present:", this._xbrlFormErrors);
+      this._showErrorPopup = true;
+      this.requestUpdate();
+      return;
+    }
+    console.log(`✅ [Save Draft] No validation errors, proceeding with save...`);
     console.log("💾 Raw form data before submission generation:", this._formData);
+    console.log("🏷️ Unit data before submission generation:", this._unitData);
+    console.log("📋 Enhanced selectedRoleIds with roleURI and order:", this._selectedRoleIds);
     const draftData = this._generateSubmissionData();
     console.log("📤 Generated submission data:", draftData);
     console.log("📊 Submission data breakdown:");
     draftData.forEach((entry, index) => {
-      console.log(`  [${index}] conceptId: ${entry.conceptId}, columnId: ${entry.columnId}, value: ${entry.value}`);
+      console.log(`  [${index}] conceptId: ${entry.conceptId}, columnId: ${entry.columnId}, value: ${entry.value}, unit: ${entry.unit || "none"}`);
     });
     const metadata = this._draftStorageService.createMetadataSnapshot(
       this.periodStartDate,
       this.periodEndDate,
       this.language,
       this._selectedRoleIds,
+      // Enhanced structure: Array<{ roleId, roleURI, order }> or string[]
       this._allSections,
       this._typedMemberData,
       this._periodPreferences,
-      this._periodData
+      this._periodData,
+      this._unitData
     );
     const saved = this._draftStorageService.saveDraft(draftData, metadata);
+    console.log("💾 [Save Draft] Metadata saved with enhanced selectedRoleIds:", metadata.selectedRoleIds);
     this.dynaformsFacts = draftData;
     this.dynaformsMetadata = metadata;
     this.dispatchEvent(new CustomEvent("form-save-draft", {
@@ -5962,12 +7350,14 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true,
       composed: true
     }));
+    const roleCount = this._getRoleIdsArray().length;
     console.log("💾 Draft saved - localStorage + event emitted", {
       entries: draftData.length,
       saved,
-      roles: this._selectedRoleIds.length,
+      roles: roleCount,
       customColumns: metadata.customColumns.length,
-      eventEmitted: true
+      eventEmitted: true,
+      enhancedRoleStructure: Array.isArray(this._selectedRoleIds) && this._selectedRoleIds.length > 0 && typeof this._selectedRoleIds[0] === "object"
     });
   }
   // ===========================================
@@ -6046,6 +7436,10 @@ let JupiterDynamicForm = class extends LitElement {
       this._periodData = metadata.periodData;
       console.log("🔄 Restored custom field-level period data:", Object.keys(this._periodData).length, "concepts");
     }
+    if (metadata.unitData) {
+      this._unitData = metadata.unitData;
+      console.log("🔄 Restored custom field-level unit data:", Object.keys(this._unitData).length, "concepts");
+    }
     if (metadata.periodPreferences) {
       this._periodPreferences = metadata.periodPreferences;
       console.log("🔄 Restored period preferences (including previous year settings):", this._periodPreferences);
@@ -6078,8 +7472,9 @@ let JupiterDynamicForm = class extends LitElement {
     }
     const restoredFormData = {};
     const restoredPeriodData = {};
+    const restoredUnitData = {};
     formData.forEach((entry) => {
-      let { conceptId, value, columnId, period } = entry;
+      let { conceptId, value, columnId, period, unit } = entry;
       if (!columnId && period) {
         columnId = this._inferColumnIdFromPeriod(period, conceptId);
         if (!columnId) {
@@ -6111,6 +7506,13 @@ let JupiterDynamicForm = class extends LitElement {
           console.log(`📅 [Restore Period] Extracted duration dates for ${conceptIdToUse}/${columnId}: ${period.startDate} - ${period.endDate}`);
         }
       }
+      if (unit) {
+        if (!restoredUnitData[conceptIdToUse]) {
+          restoredUnitData[conceptIdToUse] = {};
+        }
+        restoredUnitData[conceptIdToUse][columnId] = unit;
+        console.log(`🏷️ [Restore Unit] Extracted unit for ${conceptIdToUse}/${columnId}: ${unit}`);
+      }
     });
     this._formData = { ...this._formData, ...restoredFormData };
     console.log(`🔄 Restored ${Object.keys(restoredFormData).length} concepts with data`);
@@ -6121,6 +7523,13 @@ let JupiterDynamicForm = class extends LitElement {
     };
     console.log(`📅 [Period Restore] Merged period data: ${Object.keys(this._periodData).length} concepts with custom periods`);
     console.log(`📅 [Period Restore] Full _periodData after merge:`, JSON.stringify(this._periodData, null, 2));
+    this._unitData = {
+      ...this._unitData,
+      ...metadata.unitData || {},
+      ...restoredUnitData
+    };
+    console.log(`🏷️ [Unit Restore] Merged unit data: ${Object.keys(this._unitData).length} concepts with custom units`);
+    console.log(`🏷️ [Unit Restore] Full _unitData after merge:`, JSON.stringify(this._unitData, null, 2));
     if (this._selectedRoleIds.length > 0) {
       this._applyRoleFilter();
     }
@@ -6247,6 +7656,7 @@ let JupiterDynamicForm = class extends LitElement {
       columnsBySection.get(col.sectionId).push(col);
     });
     this._allSections.forEach((section2) => {
+      var _a;
       const savedColumns = columnsBySection.get(section2.id);
       if (savedColumns) {
         section2.columns = savedColumns.map((col) => {
@@ -6258,11 +7668,22 @@ let JupiterDynamicForm = class extends LitElement {
             periodEndDate: col.endDate || col.date,
             dimensionData: col.dimensionData,
             order: 0,
-            removable: col.columnId !== "duration" && col.columnId !== "instant"
+            removable: col.columnId !== "duration" && col.columnId !== "instant",
+            periodType: col.periodType
+            // CRITICAL: Preserve explicit period type
           };
-          console.log(`📅 [Draft Restore] Restoring column ${col.columnId}: startDate=${column2.periodStartDate}, endDate=${column2.periodEndDate}`);
+          console.log(`📅 [Draft Restore] Restoring column ${col.columnId}: startDate=${column2.periodStartDate}, endDate=${column2.periodEndDate}, periodType=${column2.periodType}`);
           return column2;
         });
+        if (((_a = this.xbrlInput) == null ? void 0 : _a.datatypes) && !section2.datatypes) {
+          const datatypesArray = Array.isArray(this.xbrlInput.datatypes) ? this.xbrlInput.datatypes : this.xbrlInput.datatypes.concepts || [];
+          section2.datatypes = datatypesArray;
+          console.log(`✅ [Draft Restore] Attached ${datatypesArray.length} datatypes to section ${section2.id}`);
+        } else if (section2.datatypes) {
+          console.log(`ℹ️ [Draft Restore] Section ${section2.id} already has ${section2.datatypes.length} datatypes`);
+        } else {
+          console.warn(`⚠️ [Draft Restore] No datatypes available for section ${section2.id}`);
+        }
         this._regenerateFieldsForSection(section2);
         console.log(`  └─ Restored ${savedColumns.length} columns for section ${section2.id}`);
       }
@@ -6291,11 +7712,21 @@ let JupiterDynamicForm = class extends LitElement {
       }
     });
     this._allSections.forEach((section2) => {
+      var _a;
       const customColumnsForSection = columnsBySection.get(section2.id);
       if (customColumnsForSection && customColumnsForSection.length > 0) {
         if (!section2.columns) {
           section2.columns = [];
         }
+        if (((_a = this.xbrlInput) == null ? void 0 : _a.datatypes) && !section2.datatypes) {
+          const datatypesArray = Array.isArray(this.xbrlInput.datatypes) ? this.xbrlInput.datatypes : this.xbrlInput.datatypes.concepts || [];
+          section2.datatypes = datatypesArray;
+          console.log(`✅ [Merge Custom] Attached ${datatypesArray.length} datatypes to section ${section2.id}`);
+        } else if (section2.datatypes) {
+          console.log(`ℹ️ [Merge Custom] Section ${section2.id} already has ${section2.datatypes.length} datatypes`);
+        } else {
+          console.warn(`⚠️ [Merge Custom] No datatypes available for section ${section2.id}`);
+        }
         customColumnsForSection.forEach((col) => {
           console.log(`📅 [Merge Custom Column] Column ${col.columnId}: col.startDate=${col.startDate}, col.endDate=${col.endDate}, col.date=${col.date}, col.periodType=${col.periodType}`);
           const existingColumn = section2.columns.find((c2) => c2.id === col.columnId);
@@ -6308,9 +7739,11 @@ let JupiterDynamicForm = class extends LitElement {
               periodEndDate: col.endDate || col.date,
               dimensionData: col.dimensionData,
               order: section2.columns.length,
-              removable: true
+              removable: true,
+              periodType: col.periodType
+              // CRITICAL: Preserve explicit period type
             };
-            console.log(`📅 [New Column Created] Column ${newColumn.id}: periodStartDate=${newColumn.periodStartDate}, periodEndDate=${newColumn.periodEndDate}`);
+            console.log(`📅 [New Column Created] Column ${newColumn.id}: periodStartDate=${newColumn.periodStartDate}, periodEndDate=${newColumn.periodEndDate}, periodType=${newColumn.periodType}`);
             section2.columns.push(newColumn);
             console.log(`  └─ Added custom column ${col.columnId} to section ${section2.id}`);
           }
@@ -6340,20 +7773,20 @@ let JupiterDynamicForm = class extends LitElement {
         if (this._periodData[concept.id]) {
           const conceptPeriodData = this._periodData[concept.id];
           if (concept.fields) {
-            concept.fields.forEach((field) => {
-              const customPeriod = conceptPeriodData[field.columnId];
+            concept.fields.forEach((field2) => {
+              const customPeriod = conceptPeriodData[field2.columnId];
               if (customPeriod) {
                 if (customPeriod.startDate) {
-                  field.periodStartDate = customPeriod.startDate;
+                  field2.periodStartDate = customPeriod.startDate;
                 }
                 if (customPeriod.endDate) {
-                  field.periodEndDate = customPeriod.endDate;
+                  field2.periodEndDate = customPeriod.endDate;
                 }
                 if (customPeriod.instantDate) {
-                  field.periodInstantDate = customPeriod.instantDate;
+                  field2.periodInstantDate = customPeriod.instantDate;
                 }
                 appliedCount++;
-                console.log(`✅ [Apply Period] Updated field ${concept.id}/${field.columnId}: start=${field.periodStartDate}, end=${field.periodEndDate}, instant=${field.periodInstantDate}`);
+                console.log(`✅ [Apply Period] Updated field ${concept.id}/${field2.columnId}: start=${field2.periodStartDate}, end=${field2.periodEndDate}, instant=${field2.periodInstantDate}`);
               }
             });
           }
@@ -6392,7 +7825,10 @@ let JupiterDynamicForm = class extends LitElement {
             const columnPeriodType = this._inferColumnPeriodType(column2);
             if (concept.abstract)
               return;
-            const shouldSkipPeriodCheck = !columnPeriodType || column2.id === "duration" || column2.id === "default";
+            const isCustomColumn = column2.id.startsWith("col-");
+            const isDimensionColumn = column2.id.startsWith("duration_") || column2.id.startsWith("instant_");
+            const isMixedSection = section2.showPeriodControl === true;
+            const shouldSkipPeriodCheck = !columnPeriodType || column2.id === "duration" || column2.id === "default" || isCustomColumn && isMixedSection || isDimensionColumn;
             if (!shouldSkipPeriodCheck && conceptPeriodType && columnPeriodType) {
               if (conceptPeriodType !== columnPeriodType) {
                 console.log(`⏭️ [Field Regeneration] Skipping field for ${concept.id} in column ${column2.id}: conceptPeriodType=${conceptPeriodType}, columnPeriodType=${columnPeriodType}`);
@@ -6407,6 +7843,8 @@ let JupiterDynamicForm = class extends LitElement {
               label: concept.label,
               periodType: conceptPeriodType,
               // Add periodType from concept
+              conceptType: concept.type,
+              // CRITICAL: Include conceptType for XBRL validation
               periodStartDate: column2.periodStartDate,
               periodEndDate: column2.periodEndDate,
               periodInstantDate: conceptPeriodType === "instant" ? column2.periodEndDate || column2.periodStartDate : void 0
@@ -6456,6 +7894,9 @@ let JupiterDynamicForm = class extends LitElement {
     return true;
   }
   _inferColumnPeriodType(column2) {
+    if (column2.periodType) {
+      return column2.periodType;
+    }
     if (column2.periodStartDate && column2.periodEndDate) {
       return column2.periodStartDate === column2.periodEndDate ? "instant" : "duration";
     }
@@ -6533,17 +7974,18 @@ let JupiterDynamicForm = class extends LitElement {
     return null;
   }
   _addConceptDataToSubmission(concept, columnId, value, submissionData, section2) {
-    var _a, _b;
-    const field = concept.fields.find((f2) => f2.columnId === columnId);
-    if (!field)
+    var _a, _b, _c;
+    const field2 = concept.fields.find((f2) => f2.columnId === columnId);
+    if (!field2)
       return;
     const isInstant = concept.periodType === "instant";
     const fieldPeriodData = (_a = this._periodData[concept.id]) == null ? void 0 : _a[columnId];
+    const fieldUnit = (_b = this._unitData[concept.id]) == null ? void 0 : _b[columnId];
     const column2 = this._findColumnByIdInAllSections(columnId);
-    console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Field Period: ${fieldPeriodData ? JSON.stringify(fieldPeriodData) : "none"}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}`);
-    const periodStartDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate;
-    const periodEndDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate;
-    const periodInstantDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.instantDate) || field.periodInstantDate || periodEndDate || periodStartDate;
+    console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Field Period: ${fieldPeriodData ? JSON.stringify(fieldPeriodData) : "none"}, Unit: ${fieldUnit || "none"}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}`);
+    const periodStartDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field2.periodStartDate || this.periodStartDate;
+    const periodEndDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field2.periodEndDate || this.periodEndDate;
+    const periodInstantDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.instantDate) || field2.periodInstantDate || periodEndDate || periodStartDate;
     const entry = {
       conceptId: concept.originalConceptId || concept.id,
       columnId,
@@ -6556,9 +7998,14 @@ let JupiterDynamicForm = class extends LitElement {
         }
       }
     };
-    if ((_b = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _b.memberLabel) {
+    if (fieldUnit) {
+      entry.unit = fieldUnit;
+      console.log(`✅ [Submission] Adding unit to entry: ${fieldUnit} for ${concept.id}/${columnId}`);
+    }
+    if ((_c = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _c.memberLabel) {
       entry.dimension = column2.dimensionData.memberLabel;
     }
+    console.log(`📤 [Submission Entry] Created entry:`, JSON.stringify(entry, null, 2));
     submissionData.push(entry);
   }
   _findColumnByIdInAllSections(columnId) {
@@ -6681,27 +8128,27 @@ let JupiterDynamicForm = class extends LitElement {
         console.warn(`[DUPLICATE DEBUG] Processing concept ${concept.originalConceptId || concept.id} in target role`);
         if (concept.fields) {
           console.warn(`[DUPLICATE DEBUG] Concept has ${concept.fields.length} fields`);
-          concept.fields.forEach((field, index) => {
+          concept.fields.forEach((field2, index) => {
             var _a;
-            console.warn(`[DUPLICATE DEBUG] Field ${index}: columnId=${field.columnId}, current value=${(_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId]}`);
+            console.warn(`[DUPLICATE DEBUG] Field ${index}: columnId=${field2.columnId}, current value=${(_a = this._formData[concept.id]) == null ? void 0 : _a[field2.columnId]}`);
           });
         }
       }
       if (concept.fields && concept.fields.length > 1) {
-        concept.fields.forEach((field, index) => {
+        concept.fields.forEach((field2, index) => {
         });
       }
       if (concept.fields && concept.fields.length > 0) {
-        concept.fields.forEach((field) => {
-          var _a, _b, _c;
+        concept.fields.forEach((field2) => {
+          var _a, _b, _c, _d;
           const conceptData = this._formData[concept.id];
-          const fieldValue = conceptData == null ? void 0 : conceptData[field.columnId];
+          const fieldValue = conceptData == null ? void 0 : conceptData[field2.columnId];
           if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
-            const column2 = this._findColumnByIdInSection(field.columnId, section2);
-            const fieldPeriodData = (_a = this._periodData[concept.id]) == null ? void 0 : _a[field.columnId];
+            const column2 = this._findColumnByIdInSection(field2.columnId, section2);
+            const fieldPeriodData = (_a = this._periodData[concept.id]) == null ? void 0 : _a[field2.columnId];
             const submissionEntry = {
               conceptId: concept.id,
-              columnId: field.columnId,
+              columnId: field2.columnId,
               // CRITICAL: Include columnId for draft restoration
               value: fieldValue,
               period: {
@@ -6709,27 +8156,34 @@ let JupiterDynamicForm = class extends LitElement {
               }
             };
             if (concept.periodType === "instant") {
-              const instantDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.instantDate) || (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field.periodInstantDate || field.periodEndDate || field.periodStartDate || this.periodStartDate;
+              const instantDate = (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;
               submissionEntry.period.date = instantDate;
             } else {
-              const startDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate;
-              const endDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate;
+              const startDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field2.periodStartDate || this.periodStartDate;
+              const endDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field2.periodEndDate || this.periodEndDate;
               submissionEntry.period.startDate = startDate;
               submissionEntry.period.endDate = endDate;
             }
-            console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field.columnId}, Field Period: ${fieldPeriodData ? JSON.stringify(fieldPeriodData) : "none"}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}, Used Period: ${submissionEntry.period.type === "instant" ? submissionEntry.period.date : `${submissionEntry.period.startDate} - ${submissionEntry.period.endDate}`}`);
-            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_b = column2.dimensionData) == null ? void 0 : _b.dimensionIdKey)) {
+            console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field2.columnId}, Field Period: ${fieldPeriodData ? JSON.stringify(fieldPeriodData) : "none"}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}, Used Period: ${submissionEntry.period.type === "instant" ? submissionEntry.period.date : `${submissionEntry.period.startDate} - ${submissionEntry.period.endDate}`}`);
+            const fieldUnit = (_b = this._unitData[concept.id]) == null ? void 0 : _b[field2.columnId];
+            if (fieldUnit) {
+              submissionEntry.unit = fieldUnit;
+              console.log(`✅ [Submission] Adding unit to entry: ${fieldUnit} for ${concept.id}/${field2.columnId}`);
+            } else {
+              console.log(`⚠️ [Submission] No unit found in _unitData for ${concept.id}/${field2.columnId}. _unitData state:`, JSON.stringify(this._unitData, null, 2));
+            }
+            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_c = column2.dimensionData) == null ? void 0 : _c.dimensionIdKey)) {
               submissionEntry.dimension = column2.dimensionData.dimensionIdKey;
-              console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field.columnId}):`, column2.dimensionData.dimensionIdKey);
+              console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field2.columnId}):`, column2.dimensionData.dimensionIdKey);
             } else {
-              console.log(`🔍 [DynamicForm] No dimension data found for field column ${field.columnId}. Column type: ${column2 == null ? void 0 : column2.type}, has dimensionData: ${!!(column2 == null ? void 0 : column2.dimensionData)}`);
+              console.log(`🔍 [DynamicForm] No dimension data found for field column ${field2.columnId}. Column type: ${column2 == null ? void 0 : column2.type}, has dimensionData: ${!!(column2 == null ? void 0 : column2.dimensionData)}`);
             }
-            if (this._typedMemberData[field.columnId]) {
+            if (this._typedMemberData[field2.columnId]) {
               const applicableTypedDimensions = this._getApplicableTypedDimensions(concept, section2);
               console.log(`🔍 [DynamicForm] Concept ${concept.id} applicable typed dimensions:`, applicableTypedDimensions);
               if (applicableTypedDimensions.length > 0) {
                 const filteredTypedMembers = {};
-                const allTypedMemberData = this._typedMemberData[field.columnId];
+                const allTypedMemberData = this._typedMemberData[field2.columnId];
                 applicableTypedDimensions.forEach((dimensionId) => {
                   if (allTypedMemberData[dimensionId]) {
                     const memberName = this._getTypedMemberNameForAxis(dimensionId, section2);
@@ -6749,12 +8203,12 @@ let JupiterDynamicForm = class extends LitElement {
                 console.log(`🔍 [DynamicForm] Skipping typed members for concept ${concept.id} - not applicable to this hypercube`);
               }
             } else {
-              console.log(`🔍 [DynamicForm] No typed member data found for column ${field.columnId}. Available columns:`, Object.keys(this._typedMemberData));
+              console.log(`🔍 [DynamicForm] No typed member data found for column ${field2.columnId}. Available columns:`, Object.keys(this._typedMemberData));
               if (column2) {
                 console.log(`🔍 [DynamicForm] Column details:`, {
                   id: column2.id,
                   type: column2.type,
-                  hasTypedMembers: (_c = column2.dimensionData) == null ? void 0 : _c.hasTypedMembers,
+                  hasTypedMembers: (_d = column2.dimensionData) == null ? void 0 : _d.hasTypedMembers,
                   dimensionData: column2.dimensionData
                 });
               }
@@ -6830,7 +8284,7 @@ let JupiterDynamicForm = class extends LitElement {
     });
   }
   _renderAdminModeContent(section2) {
-    var _a, _b, _c;
+    var _a;
     if (!section2) {
       return html`
         <div class="admin-mode-container">
@@ -6838,10 +8292,7 @@ let JupiterDynamicForm = class extends LitElement {
         </div>
       `;
     }
-    const showPreviousYearChecked = ((_a = this._adminRoleConfigs[section2.id]) == null ? void 0 : _a.showPreviousYear) ?? section2.showPreviousYear ?? false;
-    const instantChecked = ((_b = this._adminRoleConfigs[section2.id]) == null ? void 0 : _b.instant) ?? section2.instant ?? false;
-    const durationChecked = ((_c = this._adminRoleConfigs[section2.id]) == null ? void 0 : _c.duration) ?? section2.duration ?? false;
-    const hasMixedPeriodTypes = section2.showPeriodControl === true;
+    const showPreviousYearChecked = ((_a = this._periodPreferences[section2.id]) == null ? void 0 : _a.showPreviousYear) ?? section2.showPreviousYear ?? false;
     return html`
       <div class="admin-mode-container">
         <h2 class="admin-mode-title">Role Configuration: ${section2.title}</h2>
@@ -6857,45 +8308,33 @@ let JupiterDynamicForm = class extends LitElement {
               <label for="admin-prev-year-${section2.id}">Show Previous Year Column</label>
             </div>
           </div>
-          
-          ${hasMixedPeriodTypes ? html`
-            <div class="admin-role-item">
-              <div class="admin-role-checkbox">
-                <input
-                  type="checkbox"
-                  id="admin-instant-${section2.id}"
-                  .checked="${instantChecked}"
-                  @change="${(e2) => this._handleAdminCheckboxChange(section2.id, "instant", e2.target.checked)}"
-                />
-                <label for="admin-instant-${section2.id}">Show Instant Column</label>
-              </div>
-            </div>
-            
-            <div class="admin-role-item">
-              <div class="admin-role-checkbox">
-                <input
-                  type="checkbox"
-                  id="admin-duration-${section2.id}"
-                  .checked="${durationChecked}"
-                  @change="${(e2) => this._handleAdminCheckboxChange(section2.id, "duration", e2.target.checked)}"
-                />
-                <label for="admin-duration-${section2.id}">Show Duration Column</label>
-              </div>
-            </div>
-          ` : ""}
         </div>
       </div>
     `;
   }
-  _handleAdminCheckboxChange(roleId, field, checked) {
+  _handleAdminCheckboxChange(roleId, field2, checked) {
     const currentConfig = this._adminRoleConfigs[roleId] || { showPreviousYear: false };
     this._adminRoleConfigs = {
       ...this._adminRoleConfigs,
       [roleId]: {
         ...currentConfig,
-        [field]: checked
+        [field2]: checked
       }
     };
+    const currentPeriodPref = this._periodPreferences[roleId] || {
+      showDuration: true,
+      showInstant: true,
+      showPreviousYear: false
+    };
+    this._periodPreferences = {
+      ...this._periodPreferences,
+      [roleId]: {
+        ...currentPeriodPref,
+        [field2]: checked
+      }
+    };
+    console.log(`✅ [Admin Mode] Updated ${field2} = ${checked} for role ${roleId}`);
+    console.log(`📋 [Admin Mode] _periodPreferences now includes:`, this._periodPreferences[roleId]);
   }
   _handleAdminModeSubmit() {
     var _a, _b, _c, _d;
@@ -6916,12 +8355,6 @@ let JupiterDynamicForm = class extends LitElement {
       };
       if (config !== void 0 && isSelected) {
         updatedRole.showPreviousYear = config.showPreviousYear;
-        if (config.instant !== void 0) {
-          updatedRole.instant = config.instant;
-        }
-        if (config.duration !== void 0) {
-          updatedRole.duration = config.duration;
-        }
       }
       return updatedRole;
     });
@@ -6943,8 +8376,8 @@ let JupiterDynamicForm = class extends LitElement {
           <div class="validation-summary">
             <h4 class="validation-summary-title">${I18n.t("validation.summary")}</h4>
             <ul class="validation-summary-list">
-              ${this._errors.filter((e2) => e2.severity === "error").map((error) => html`
-                  <li class="validation-summary-item">${error.message}</li>
+              ${this._errors.filter((e2) => e2.severity === "error").map((error2) => html`
+                  <li class="validation-summary-item">${error2.message}</li>
                 `)}
             </ul>
           </div>
@@ -6961,12 +8394,19 @@ let JupiterDynamicForm = class extends LitElement {
             <p>${I18n.t("filter.selectRoles")}</p>
             <p>${I18n.t("filter.roles")}: ${this._allSections.length}</p>
           </div>
-        ` : schema.sections.map((section2, index) => html`
+        ` : schema.sections.map((section2, index) => {
+      var _a;
+      return html`
           <jupiter-form-section
+            section-id="${section2.id}"
             .section="${section2}"
             .columns="${section2.columns || this._columns}"
+            .datatypes="${section2.datatypes || ((_a = this.xbrlInput) == null ? void 0 : _a.datatypes)}"
             .formData="${this._formData}"
+            .periodData="${this._periodData}"
+            .unitData="${this._unitData}"
             .typedMemberData="${this._typedMemberData}"
+            .defaultUnits="${this.defaultUnits}"
             .disabled="${this.disabled || this.readonly}"
             .collapsible="${config.collapsibleSections !== false}"
             .locale="${config.locale || "en-US"}"
@@ -6980,11 +8420,13 @@ let JupiterDynamicForm = class extends LitElement {
             @column-remove="${this._handleColumnRemove}"
             @column-add-request="${this._handleColumnAddRequest}"
           ></jupiter-form-section>
-        `)}
+        `;
+    })}
       </div>
     `;
   }
   _renderSidePanelLayout(schema, config, showValidationSummary, errorCount) {
+    var _a;
     const visibleSections = schema.sections;
     const filteredSections = this._filterSidePanelSections(visibleSections);
     if (!this._activeSidePanelRoleId || !filteredSections.find((s2) => s2.id === this._activeSidePanelRoleId)) {
@@ -7061,8 +8503,8 @@ let JupiterDynamicForm = class extends LitElement {
               <div class="validation-summary">
                 <h4 class="validation-summary-title">Please fix the following errors:</h4>
                 <ul class="validation-summary-list">
-                  ${this._errors.filter((e2) => e2.severity === "error").map((error) => html`
-                      <li class="validation-summary-item">${error.message}</li>
+                  ${this._errors.filter((e2) => e2.severity === "error").map((error2) => html`
+                      <li class="validation-summary-item">${error2.message}</li>
                     `)}
                 </ul>
               </div>
@@ -7075,10 +8517,15 @@ let JupiterDynamicForm = class extends LitElement {
               </div>
             ` : activeSection ? html`
               <jupiter-form-section
+                section-id="${activeSection.id}"
                 .section="${activeSection}"
                 .columns="${activeSection.columns || this._columns}"
+                .datatypes="${activeSection.datatypes || ((_a = this.xbrlInput) == null ? void 0 : _a.datatypes)}"
                 .formData="${this._formData}"
+                .periodData="${this._periodData}"
+                .unitData="${this._unitData}"
                 .typedMemberData="${this._typedMemberData}"
+                .defaultUnits="${this.defaultUnits}"
                 .disabled="${this.disabled || this.readonly}"
                 .collapsible="${false}"
                 .hideHeader="${true}"
@@ -7179,11 +8626,7 @@ let JupiterDynamicForm = class extends LitElement {
             ${I18n.t("form.submit")}
           </button>
 
-          <div class="form-meta">
-            <span>${I18n.t("form.errors")}: ${errorCount}</span>
-            <span>${I18n.t("form.modified")}: ${this._dirty ? I18n.t("form.yes") : I18n.t("form.no")}</span>
-            <span>${I18n.t("form.valid")}: ${this._valid ? I18n.t("form.yes") : I18n.t("form.no")}</span>
-          </div>
+         
         </div>
 
         <!-- Filter Roles Dialog -->
@@ -7191,13 +8634,61 @@ let JupiterDynamicForm = class extends LitElement {
           <jupiter-filter-roles-dialog
             ?open="${this._showFilterDialog}"
             .availableRoles="${this._allSections}"
-            .selectedRoleIds="${this._selectedRoleIds}"
+            .selectedRoleIds="${this._getRoleIdsArray()}"
             .periodPreferences="${this._periodPreferences}"
+            .mode="${this.mode}"
             @dialog-cancel="${this._handleFilterDialogCancel}"
             @roles-filter-apply="${this._handleRoleFilterApply}"
             @click="${this._handleFilterDialogCancel}"
           ></jupiter-filter-roles-dialog>
         ` : ""}
+        
+        <!-- Validation Error Popup -->
+        ${this._showErrorPopup ? html`
+          <div class="error-popup-overlay" @click="${() => {
+      this._showErrorPopup = false;
+      this.requestUpdate();
+    }}">
+            <div class="error-popup" @click="${(e2) => e2.stopPropagation()}">
+              <div class="error-popup-header">
+                <h3>⚠️ ${I18n.t("error.popup.title")}</h3>
+                <button class="error-popup-close" @click="${() => {
+      this._showErrorPopup = false;
+      this.requestUpdate();
+    }}">×</button>
+              </div>
+              <div class="error-popup-content">
+                <p>${I18n.t("error.popup.message")}</p>
+                <ul class="error-list">
+                  ${this._xbrlFormErrors.map((error2) => html`
+                    <li>
+                      <strong>${I18n.t("error.popup.field")}</strong> 
+                      <a 
+                        href="javascript:void(0)" 
+                        class="error-field-link"
+                        @click="${() => this._handleErrorFieldClick(error2.conceptId, error2.columnId, error2.sectionId)}"
+                        title="${I18n.t("error.popup.clickToFocus")}"
+                      >
+                        ${error2.conceptId}__${error2.columnId}
+                      </a><br>
+                      <strong>${I18n.t("error.popup.value")}</strong> ${error2.value}<br>
+                      <strong>${I18n.t("error.popup.errors")}</strong>
+                      <ul>
+                        ${error2.errors.map((err) => html`<li>${err.message}</li>`)}
+                      </ul>
+                    </li>
+                  `)}
+                </ul>
+              </div>
+              <div class="error-popup-footer">
+                <button class="btn-primary" @click="${() => {
+      this._showErrorPopup = false;
+      this.requestUpdate();
+    }}">${I18n.t("error.popup.ok")}</button>
+              </div>
+            </div>
+          </div>
+        ` : ""}
       </div>
     `;
   }
@@ -7631,6 +9122,128 @@ JupiterDynamicForm.styles = css`
       cursor: pointer;
       user-select: none;
     }
+
+    /* Error Popup Styles */
+    .error-popup-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+    }
+
+    .error-popup {
+      background: white;
+      border-radius: 8px;
+      max-width: 600px;
+      width: 90%;
+      max-height: 80vh;
+      overflow: hidden;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      display: flex;
+      flex-direction: column;
+    }
+
+    .error-popup-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--jupiter-section-header-background, #f0f2f5);
+    }
+
+    .error-popup-header h3 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--jupiter-error-color, #d32f2f);
+    }
+
+    .error-popup-close {
+      background: transparent;
+      border: none;
+      font-size: 28px;
+      cursor: pointer;
+      padding: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      color: var(--jupiter-text-color, #333);
+      transition: background-color 0.2s;
+    }
+
+    .error-popup-close:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .error-popup-content {
+      padding: 24px;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .error-popup-content p {
+      margin: 0 0 16px 0;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .error-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .error-list > li {
+      padding: 12px;
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      margin-bottom: 12px;
+    }
+
+    .error-list > li strong {
+      color: var(--jupiter-text-primary, #333);
+      font-weight: 600;
+    }
+
+    .error-list ul {
+      margin: 8px 0 0 0;
+      padding-left: 20px;
+    }
+
+    .error-list ul li {
+      color: var(--jupiter-error-color, #d32f2f);
+      margin: 4px 0;
+    }
+
+    .error-popup-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+    }
+
+    .error-field-link {
+      color: #0066cc;
+      text-decoration: underline;
+      cursor: pointer;
+      font-family: monospace;
+    }
+
+    .error-field-link:hover {
+      color: #0052a3;
+      text-decoration: none;
+    }
   `;
 __decorateClass([
   n2({ type: Object })
@@ -7668,6 +9281,9 @@ __decorateClass([
 __decorateClass([
   n2({ type: Array })
 ], JupiterDynamicForm.prototype, "financialStatementsTypeAxis", 2);
+__decorateClass([
+  n2({ type: Array })
+], JupiterDynamicForm.prototype, "defaultUnits", 2);
 __decorateClass([
   n2({ type: Object, attribute: "dynaforms-metadata" })
 ], JupiterDynamicForm.prototype, "dynaformsMetadata", 2);
@@ -7692,6 +9308,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_preservedPeriodData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_unitData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_preservedUnitData", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_typedMemberData", 2);
@@ -7716,6 +9338,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_submitted", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_xbrlFormErrors", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_showErrorPopup", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_currentSchema", 2);
@@ -7756,11 +9384,15 @@ export {
   JupiterFormField,
   JupiterFormSection,
   TYPE_INPUT_MAP,
+  XBRLValidator,
+  collectEnumerationsFromChain,
+  determineInputTypeFromBaseChain,
   getInputTypeForConceptType,
   isCheckboxType,
   isNumericType,
   isSelectType,
   isTextareaType,
+  resolveBaseTypeChain,
   version
 };
 //# sourceMappingURL=index.mjs.map