commons-shared-web-ui 0.0.19 → 0.0.20

package/fesm2022/commons-shared-web-ui.mjs

@@ -3700,6 +3700,8 @@ class SmartFormTranslationUtils {
             field.optionConfig.optionList.forEach(opt => {
                 if (opt.label)
                     opt.label = translate(opt.label);
+                if (opt.hint)
+                    opt.hint = translate(opt.hint);
             });
         }
         // Recurse into children (ROW or GROUP)
@@ -4595,6 +4597,13 @@ class FormFieldComponent {
         const count = this.config.children?.length || 1;
         return Math.max(1, Math.floor(12 / count));
     }
+    getOptionColSpan(option) {
+        const span = option.colSpan || option.colspan;
+        if (span)
+            return span;
+        const count = this.config.optionConfig?.optionList?.length || 1;
+        return Math.max(1, Math.floor(12 / count));
+    }
     // ── Rating helpers ───────────────────────────────────────────────────────
     onRatingChange(star, event) {
         if (!this.config.name || this.config.disabled)
@@ -5364,11 +5373,11 @@ class FormFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldComponent, deps: [{ token: i1$2.FormBuilder }, { token: ExpressionService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormFieldComponent, isStandalone: false, selector: "lib-form-field", inputs: { config: "config", controller: "controller", formGroup: "formGroup", allowMulti: "allowMulti" }, viewQueries: [{ propertyName: "mediaDeviceInput", first: true, predicate: ["mediaDeviceInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\" class=\"group-section-wrapper\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save Header with Add button (top-right style) -->\r\n    <div class=\"multi-save-header\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard Header for non-multiSave -->\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\" class=\"group-instance\"\r\n      [class.is-editing]=\"instance.isEditing\"\r\n      [class.is-card]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n\r\n      <!-- 1. EDIT MODE / UNSAVED / STANDARD STATE -->\r\n      <div [hidden]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <!-- Instance header \u2014 show remove only when more than 1 instance -->\r\n        <div class=\"group-header\" *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active && instanceList.length > 1\">\r\n          <span class=\"group-number\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          <lib-button [variant]=\"'danger-outline'\" [icon]=\"{type: 'material', value: 'delete_outline'}\"\r\n            (click)=\"removeGroupInstance(i)\">\r\n            {{ removeLabel }}\r\n          </lib-button>\r\n        </div>\r\n\r\n        <div class=\"group-fields sf-grid\">\r\n          <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n            <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n              <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\" [allowMulti]=\"true\">\r\n              </lib-form-field>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- SAVE / CANCEL BUTTONS for MultiSave in Editing phase -->\r\n        <div class=\"group-footer\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n          <span class=\"field-error\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n          <div class=\"footer-actions\">\r\n            <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n            <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 2. CARD VIEW (Saved State) -->\r\n      <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <div class=\"card-view\" [class.is-expanded]=\"instance.isExpanded\">\r\n          <div class=\"card-content\">\r\n            <span class=\"card-title\">{{ instance.fg.get(config.sectionConfig.multiSaveConfig.summaryField || '')?.value\r\n              || '\u2014' }}</span>\r\n            <!-- <span class=\"card-desc\" *ngIf=\"config.sectionConfig.multiSaveConfig.descriptionField\"\r\n              [innerHTML]=\"instance.fg.get(config.sectionConfig.multiSaveConfig.descriptionField)?.value\">\r\n            </span> -->\r\n          </div>\r\n          <div class=\"card-actions\">\r\n            <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n            <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n            <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n              {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Standard Add Button for non-multiSave -->\r\n    <lib-button *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\" [variant]=\"'outline'\"\r\n      [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\" class=\"btn-add-group-wrapper\">\r\n      {{ addLabel }} {{ config.sectionConfig!.label }}\r\n    </lib-button>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\" class=\"password-toggle\" (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min\" [max]=\"config.numberConfig?.max\" [step]=\"config.numberConfig?.step || 1\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper\" *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper\" [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\" class=\"ac-clear-btn\" *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          {{ option.label }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST'\" class=\"checkbox-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"chip-label\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container\">\r\n      <span class=\"field-label\">{{ config.label }}</span>\r\n      <div class=\"switch\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star\" [class.filled]=\"isStarFilled(star)\"\r\n        [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\r\n    <div class=\"generated-value\">{{ value || '-' }}</div>\r\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div class=\"upload-drop-zone\" [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\"\r\n      [class.is-invalid]=\"errorMessage\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onFileDrop($event)\" (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"upload-icon-wrap\">\r\n        <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text\">Drag and drop files here or <span class=\"upload-link\">click to upload</span></p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported formats:\r\n        <span class=\"upload-formats\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\" class=\"uploaded-item\" [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner (shown while API call is in progress) -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner\"></div>\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <!-- File type icon -->\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n\r\n          <!-- Image thumbnail (only for images) -->\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb\" alt=\"preview\">\r\n\r\n          <!-- Name & size -->\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Remove button \u2014 disabled while uploading -->\r\n        <lib-button [variant]=\"'danger-outline'\" [disabled]=\"f.isUploading\"\r\n          (click)=\"!f.isUploading && removeUploadedFile(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header\">\r\n          <h3 class=\"mu-title\">\r\n            {{ config.label }}\r\n            <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span class=\"mu-badge\" *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description\" *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown\" *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--video\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--device\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] || 'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--library\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] || 'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel\" *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div class=\"media-upload-status\" *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section\" *ngIf=\"mediaItems.length\">\r\n          <div class=\"media-carousel-main\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--prev\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer\" *ngFor=\"let item of mediaItems; let i = index\"\r\n              [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\" class=\"carousel-uploading\">\r\n                <div class=\"carousel-spinner\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe\" [src]=\"item.url | trustedUrl\" frameborder=\"0\" allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\" class=\"carousel-remove-btn\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--next\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\" class=\"carousel-dot\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\" class=\"media-thumb\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\" class=\"thumb-uploading\">\r\n                <div class=\"thumb-spinner\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div class=\"mu-right-empty\" *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal\" *ngIf=\"showLibraryModal\" role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header\">\r\n      <h3 class=\"library-modal-title\">\r\n        <mat-icon>photo_library</mat-icon>\r\n        {{ controller.labels['LBL_LIBRARY_TITLE'] || 'Media Library' }}\r\n      </h3>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\" class=\"library-close-btn\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error\" *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item\" [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img\" alt=\"Library image\">\r\n        <div class=\"library-check\" *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div class=\"library-empty\" *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"library-modal-footer\">\r\n      <span class=\"library-selected-count\">\r\n        {{ librarySelectedIds.size }} {{ controller.labels['LBL_LIBRARY_SELECTED'] || 'selected' }}\r\n      </span>\r\n      <div class=\"library-footer-actions\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_LIBRARY_ADD_SELECTED'] || 'Add Selected' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs\">\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel\">\r\n\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\" class=\"loc-venue-item\">\r\n          <mat-icon class=\"loc-venue-search-icon\">search</mat-icon>\r\n          <span class=\"loc-venue-text\">{{ venue.address || venue.name || venue.description }}</span>\r\n          <button type=\"button\" class=\"loc-action-btn loc-delete-btn\" (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text\" *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper\">\r\n          <mat-icon class=\"loc-search-icon\">search</mat-icon>\r\n          <input class=\"field-input loc-search-input\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel\" *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\" class=\"loc-suggestion-item\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\" class=\"loc-add-btn\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container\" *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame\" [style.height]=\"config.locationConfig?.mapHeight || '300px'\"\r\n            [src]=\"getLocationMapEmbedUrl() | trustedUrl\" frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel\">\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper\">\r\n        <mat-icon class=\"loc-search-icon\">link</mat-icon>\r\n        <input class=\"field-input loc-search-input\" type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\" class=\"loc-panel loc-tba-panel\">\r\n      <div class=\"loc-tba-content\">\r\n        <mat-icon class=\"loc-tba-icon\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".form-field{margin-bottom:var(--cc-sf-grid-gap, 16px)}.form-field.has-error .field-input{border-color:var(--cc-sf-error-border, #DC2626)}.form-row{display:flex;gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{display:block;color:var(--cc-sf-label-color, #202124);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-label-weight, 500);font-size:var(--cc-sf-label-size, 18px);line-height:var(--cc-sf-label-line-height, 100%);letter-spacing:var(--cc-sf-label-letter-spacing, 0%);margin-bottom:.5rem}.field-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.field-input{width:100%;opacity:var(--cc-sf-input-opacity, 1);gap:var(--cc-sf-input-gap, 10px);padding-top:var(--cc-sf-input-padding-y, .625rem);padding-bottom:var(--cc-sf-input-padding-y, .625rem);padding-left:var(--cc-sf-input-padding-x, 16px);padding-right:var(--cc-sf-input-padding-x, 16px);font-size:var(--cc-sf-input-font-size, .875rem);line-height:var(--cc-sf-input-line-height, 1.5);color:var(--cc-sf-input-color, #111827);background-color:var(--cc-sf-input-bg, #ffffff);border:var(--cc-sf-input-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);box-shadow:var(--cc-sf-input-shadow, none);transition:var(--cc-sf-input-transition, all .2s ease);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.field-input::placeholder{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 16px);line-height:var(--cc-sf-placeholder-line-height, 100%);letter-spacing:var(--cc-sf-placeholder-letter-spacing, 0%);color:var(--cc-sf-input-placeholder, #9CA3AF)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border, #3B82F6);box-shadow:var(--cc-sf-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, .12))}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.field-input.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.field-input.is-invalid:focus{box-shadow:var(--cc-sf-error-focus-shadow, 0 0 0 3px rgba(220, 38, 38, .1))}.field-input.textarea{resize:vertical;min-height:100px;font-family:var(--cc-sf-font-family, inherit)}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.field-hint{font-size:var(--cc-sf-hint-size, .75rem);color:var(--cc-sf-hint-color, #6B7280)}.char-count-hint{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:400;font-style:normal;font-size:14px;line-height:100%;letter-spacing:.02em;text-align:right;color:var(--cc-sf-hint-color, #6B7280);margin-top:4px}.field-error{font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:8px}.radio-label,.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--cc-sf-label-size, .875rem);color:var(--cc-sf-label-color, #111827)}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #3B82F6)}.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:var(--cc-sf-chip-padding, 6px 14px);background:var(--cc-sf-chip-bg, #ffffff);color:var(--cc-sf-chip-color, #374151);border:var(--cc-sf-chip-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-chip-radius, 20px);cursor:pointer;font-size:var(--cc-sf-font-size-base, .875rem);transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-chip-selected-bg, #3B82F6);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-chip-selected-border, #3B82F6)}.switch-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch{position:relative;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on, #3B82F6)}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--cc-sf-switch-track-off, #D1D5DB);transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb, #ffffff);transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{display:inline-flex;align-items:center;cursor:pointer;transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper{position:relative;display:flex;align-items:center}.password-wrapper .password-input{padding-right:2.75rem;width:100%}.password-wrapper .password-toggle{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.25rem;line-height:1;color:var(--cc-sf-hint-color, #6B7280);display:flex;align-items:center;justify-content:center;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.generated-value{padding:var(--cc-sf-generated-padding, .625rem .875rem);background:var(--cc-sf-generated-bg, #F3F4F6);border:var(--cc-sf-generated-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-generated-radius, 8px);font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-generated-color, #6B7280);font-family:var(--cc-sf-font-family, inherit)}.group-section-wrapper{margin-bottom:var(--cc-sf-section-gap, 20px);border:var(--cc-sf-section-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-radius, 10px);padding:var(--cc-sf-section-padding, 20px);background-color:var(--cc-sf-section-bg, #ffffff);box-shadow:var(--cc-sf-section-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-instance{position:relative;margin-bottom:16px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper .group-instance .group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .group-instance .group-header .group-number{font-weight:500;color:var(--cc-sf-instance-num-color, #4B5563);font-size:var(--cc-sf-instance-num-size, .8125rem)}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .group-label{border:none;padding-bottom:0;margin-bottom:0}.group-section-wrapper.multi-save-active .multi-save-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{background:var(--ms-card-bg, #ffffff);border:1px solid var(--ms-card-border, #E5E7EB);border-radius:var(--ms-card-radius, 10px);box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05));padding:0;margin-bottom:16px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content{flex:1;display:flex;flex-direction:column;gap:4px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{font-size:1rem;font-weight:600;color:var(--ms-title-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{font-size:.875rem;color:var(--ms-desc-color, #6B7280);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions{display:flex;align-items:center;gap:16px;margin-left:20px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--cc-sf-instance-divider, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer .footer-actions{display:flex;gap:12px}.btn-remove{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:var(--cc-sf-error-text-size, .75rem);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px 16px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);background-color:var(--cc-sf-dropzone-bg, #FFFAF1);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;text-align:center;-webkit-user-select:none;user-select:none}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap{margin-bottom:4px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:56px;width:56px;height:56px;line-height:56px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-main-text{font-size:.9rem;font-weight:600;color:var(--cc-sf-label-color, #1E293B);margin:0}.upload-main-text .upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-hint-text{font-size:.78rem;color:var(--cc-sf-dropzone-hint-color, #64748B);margin:0}.upload-hint-text .upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.uploaded-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.uploaded-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}.uploaded-item .file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.uploaded-item .file-info .file-name{font-size:.85rem;font-weight:500;color:var(--cc-sf-label-color, #1E293B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uploaded-item .file-info .file-size{font-size:.72rem;color:var(--cc-sf-hint-color, #94A3B8)}.uploaded-item .file-remove-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:4px;border-radius:4px;flex-shrink:0;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover{color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border:2px solid var(--cc-sf-spinner-track, #E2E8F0);border-top-color:var(--cc-sf-spinner-color, #3B82F6);border-radius:50%;animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.rich-text-editor{display:block;width:100%}.uploading-label{color:var(--cc-sf-spinner-color, #3B82F6)!important;font-style:italic}.input-group{position:relative;display:flex;align-items:stretch;width:100%}.input-group .field-input{flex:1;border-radius:var(--cc-sf-input-radius, 8px)}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);cursor:default;padding-right:3.5rem}.input-group.readonly .input-prefix,.input-group.readonly .input-suffix{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)}.input-prefix,.input-suffix{display:flex;align-items:center;padding:0 .875rem;background-color:var(--cc-sf-input-bg, #FFFFFF);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);color:var(--cc-sf-hint-color, #6B7280);font-size:var(--cc-sf-input-font-size, .875rem);white-space:nowrap;-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px);color:var(--cc-sf-chip-selected-bg, #3B82F6);font-weight:500}.readonly-icons{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper{margin-bottom:var(--cc-sf-grid-gap, 16px)}.subfields-group-wrapper .group-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:600;color:var(--cc-sf-label-color, #111827);margin-bottom:.75rem}.subfields-group-wrapper .group-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.subfields-group-wrapper .subfields-row{display:flex;align-items:flex-end;gap:12px;border-radius:var(--cc-sf-input-radius, 8px);transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{flex:1;min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{margin-bottom:24px;font-weight:700;color:#94a3b8}.subfields-group-wrapper .subfields-group-error{display:block;margin-top:6px;font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}.autocomplete-wrapper .ac-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-input{flex:1;padding-left:2.4rem;padding-right:2.4rem}.autocomplete-wrapper .ac-clear-btn{position:absolute;right:.6rem;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:.2rem;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-input-focus-border, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.ac-no-results{font-style:italic;font-size:.8125rem;color:var(--cc-sf-hint-color, #6B7280)}.media-upload-wrapper{padding:0;border:none;background:none}.mu-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:flex-start}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-left{display:flex;flex-direction:column;gap:20px}.mu-header{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px}.mu-title{margin:0;font-size:1.35rem;font-weight:700;color:var(--cc-sf-label-color, #111827);line-height:1.3}.mu-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;background:var(--cc-sf-label-color, #111827);color:#fff;font-size:.72rem;font-weight:600;white-space:nowrap;flex-shrink:0}.mu-description{margin:0;font-size:.875rem;color:var(--cc-sf-hint-color, #6B7280);line-height:1.6}.mu-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.mu-feature-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--cc-sf-hint-color, #374151)}.mu-feature-item .mu-check{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--cc-sf-chip-selected-bg, #3B82F6);flex-shrink:0}.mu-right{display:flex;flex-direction:column;gap:12px;min-height:260px}.mu-right-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:250px;max-width:400px;border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1);border-radius:var(--mu-carousel-radius, 12px);background:var(--cc-sf-dropzone-bg, #FFFAF1);text-align:center;color:var(--cc-sf-hint-color, #94A3B8);padding:24px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{font-size:52px;width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{position:relative;display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{font-size:18px;width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:200;min-width:240px;background:var(--mu-dropdown-bg, #ffffff);border:var(--mu-dropdown-border, 1px solid #E5E7EB);border-radius:12px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));overflow:hidden;animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:none;border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);cursor:pointer;text-align:left;transition:background .15s ease;font-family:var(--cc-sf-font-family, inherit)}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{display:flex;flex-direction:column;gap:2px;flex:1}.media-drop-label{font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.media-drop-desc{font-size:.75rem;color:var(--cc-sf-hint-color, #6B7280)}.youtube-input-panel{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--cc-sf-dropzone-bg, #FFFAF1);border:1px solid var(--cc-sf-input-border, #E5E7EB);border-radius:10px;animation:mu-fade-in .18s ease}.youtube-panel-label{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{display:flex;gap:8px;align-items:stretch}.youtube-input-row .youtube-url-input{flex:1}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-top:4px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);border-radius:8px;font-size:.85rem;font-weight:500;animation:mu-fade-in .2s ease}.media-upload-status .status-icon{font-size:18px;width:18px;height:18px;line-height:18px}.media-carousel-section{display:flex;flex-direction:column;gap:12px}.media-carousel-main{position:relative;width:100%;max-width:400px;height:var(--mu-carousel-height, 250px);background:var(--mu-carousel-bg, #0F172A);border-radius:var(--mu-carousel-radius, 12px);overflow:hidden;display:flex;align-items:center;justify-content:center}.carousel-viewer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.carousel-viewer .carousel-image{width:100%;height:100%;object-fit:cover;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-iframe{width:100%;height:100%;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-uploading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#94a3b8;font-size:.85rem}.carousel-viewer .carousel-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:#ffffffd9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{position:absolute;top:10px;right:10px;z-index:10;width:32px;height:32px;border-radius:50%;background:#0000008c;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:10}.carousel-dot{width:8px;height:8px;border-radius:50%;background:#ffffff73;cursor:pointer;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{display:flex;flex-wrap:wrap;max-width:400px;gap:8px;overflow-x:auto;padding-bottom:4px}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--mu-thumb-bg, #E2E8F0);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, #3B82F6);transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{width:100%;height:100%;object-fit:cover}.media-thumb .thumb-yt-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#1e293b;color:#ef4444}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border:2px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;background:var(--mu-modal-bg, #ffffff);border-radius:var(--mu-modal-radius, 16px);box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));display:flex;flex-direction:column;overflow:hidden;animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);flex-shrink:0}.library-modal-title{display:flex;align-items:center;gap:8px;margin:0;font-size:1.05rem;font-weight:700;color:var(--cc-sf-label-color, #111827)}.library-modal-title mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:var(--mu-icon-library-color, #22C55E)}.library-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading,.library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--cc-sf-hint-color, #9CA3AF);font-size:.875rem;flex:1}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border:3px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.library-error{display:flex;align-items:center;gap:8px;padding:16px 24px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);font-size:.875rem;flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px;overflow-y:auto;flex:1}.library-grid::-webkit-scrollbar{width:6px}.library-grid::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:3px}.library-grid-item{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;transition:border-color .2s ease,transform .15s ease}.library-grid-item.selected{border-color:var(--cc-sf-chip-selected-bg, #3B82F6);transform:scale(.97)}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{width:100%;height:100%;object-fit:cover;display:block}.library-overlay-hover{position:absolute;inset:0;background:#3b82f61f;opacity:0;transition:opacity .15s ease}.library-check{position:absolute;top:6px;right:6px;color:var(--cc-sf-chip-selected-bg, #3B82F6);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 20px;border-top:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);flex-shrink:0}.library-selected-count{font-size:.875rem;font-weight:600;color:var(--cc-sf-hint-color, #6B7280)}.library-footer-actions{display:flex;gap:10px}.location-field-wrapper{gap:12px}.location-subtitle{margin:0;font-size:var(--cc-sf-hint-size, .8125rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.5}.location-tabs{display:flex;gap:12px;margin-bottom:24px}.loc-tab-btn{flex:1}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:#fff!important;color:#000!important;border:1px solid #E5E7EB}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:#f3f4f6!important}.loc-panel{display:flex;flex-direction:column;gap:12px}.loc-section-label{margin:0;font-size:var(--cc-sf-label-size, .9rem);font-weight:600;color:var(--cc-sf-label-color, #111827)}.loc-venue-list{display:flex;flex-direction:column;gap:8px}.loc-venue-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--loc-venue-item-bg, #ffffff);border:1px solid var(--loc-venue-item-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--cc-sf-hint-color, #9CA3AF);flex-shrink:0}.loc-venue-text{flex:1;font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-input-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-action-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-count-text{margin:0;font-size:.8125rem;font-weight:600;color:var(--cc-sf-input-focus-border, #3B82F6)}.loc-search-container{position:relative}.loc-search-wrapper{position:relative;display:flex;align-items:center}.loc-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1}.loc-search-input{flex:1;padding-left:2.4rem!important}.loc-suggestions-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:300;background:var(--loc-suggestion-bg, #ffffff);border:1px solid var(--cc-sf-input-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 8px);box-shadow:0 8px 24px #0000001a;overflow:hidden;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .12s ease;font-family:var(--cc-sf-font-family, inherit)}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--loc-delete-color, #E53E3E);flex-shrink:0}.loc-suggestion-text{font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-label-color, #374151);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-add-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--loc-add-color, #1A56DB);font-family:var(--cc-sf-font-family, inherit);font-size:var(--cc-sf-input-font-size, .875rem);font-weight:600;padding:0;transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{border-radius:var(--loc-map-radius, 10px);overflow:hidden;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);box-shadow:0 2px 10px #0000000f}.loc-map-frame{width:100%;display:block;border:none}.loc-map-hint{margin:0;font-size:.78rem;color:var(--cc-sf-hint-color, #6B7280);text-align:center}.loc-tba-panel{min-height:120px;justify-content:center}.loc-tba-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 24px;background:var(--loc-tba-bg, #F9FAFB);border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 10px)}.loc-tba-icon{font-size:40px;width:40px;height:40px;line-height:40px;color:var(--loc-tba-icon-color, #9CA3AF);opacity:.6}.loc-tba-text{margin:0;font-size:var(--cc-sf-input-font-size, .9rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.6;max-width:360px}.loc-online-panel .loc-search-wrapper{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }, { kind: "pipe", type: TrustedUrlPipe, name: "trustedUrl" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormFieldComponent, isStandalone: false, selector: "lib-form-field", inputs: { config: "config", controller: "controller", formGroup: "formGroup", allowMulti: "allowMulti" }, viewQueries: [{ propertyName: "mediaDeviceInput", first: true, predicate: ["mediaDeviceInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\" *ngIf=\"child.isEnabled !== false\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\" class=\"group-section-wrapper\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save Header with Add button (top-right style) -->\r\n    <div class=\"multi-save-header\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard Header for non-multiSave -->\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\" class=\"group-instance\"\r\n      [class.is-editing]=\"instance.isEditing\"\r\n      [class.is-card]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n\r\n      <!-- 1. EDIT MODE / UNSAVED / STANDARD STATE -->\r\n      <div [hidden]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <!-- Instance header \u2014 show remove only when more than 1 instance -->\r\n        <div class=\"group-header\" *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active && instanceList.length > 1\">\r\n          <span class=\"group-number\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          <lib-button [variant]=\"'danger-outline'\" [icon]=\"{type: 'material', value: 'delete_outline'}\"\r\n            (click)=\"removeGroupInstance(i)\">\r\n            {{ removeLabel }}\r\n          </lib-button>\r\n        </div>\r\n\r\n        <div class=\"group-fields sf-grid\">\r\n          <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n            <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n              <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\" [allowMulti]=\"true\">\r\n              </lib-form-field>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- SAVE / CANCEL BUTTONS for MultiSave in Editing phase -->\r\n        <div class=\"group-footer\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n          <span class=\"field-error\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n          <div class=\"footer-actions\">\r\n            <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n            <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 2. CARD VIEW (Saved State) -->\r\n      <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <div class=\"card-view\" [class.is-expanded]=\"instance.isExpanded\">\r\n          <div class=\"card-content\">\r\n            <span class=\"card-title\">{{ instance.fg.get(config.sectionConfig.multiSaveConfig.summaryField || '')?.value\r\n              || '\u2014' }}</span>\r\n            <!-- <span class=\"card-desc\" *ngIf=\"config.sectionConfig.multiSaveConfig.descriptionField\"\r\n              [innerHTML]=\"instance.fg.get(config.sectionConfig.multiSaveConfig.descriptionField)?.value\">\r\n            </span> -->\r\n          </div>\r\n          <div class=\"card-actions\">\r\n            <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n            <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n            <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n              {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Standard Add Button for non-multiSave -->\r\n    <lib-button *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\" [variant]=\"'outline'\"\r\n      [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\" class=\"btn-add-group-wrapper\">\r\n      {{ addLabel }} {{ config.sectionConfig!.label }}\r\n    </lib-button>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\" class=\"password-toggle\" (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min\" [max]=\"config.numberConfig?.max\" [step]=\"config.numberConfig?.step || 1\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper\" *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper\" [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\" class=\"ac-clear-btn\" *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          {{ option.label }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\" \r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"formGroup.get(config.name!)?.value === option.code\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <div class=\"option-content\">\r\n          <span class=\"label-text\">{{ option.label }}</span>\r\n          <span class=\"option-hint\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST' || config.subType === 'CARD'\" class=\"checkbox-group\" [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"isChecked(option.code)\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <div class=\"option-content\">\r\n          <span class=\"label-text\">{{ option.label }}</span>\r\n          <span class=\"option-hint\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"chip-label\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container\">\r\n      <span class=\"field-label\">{{ config.label }}</span>\r\n      <div class=\"switch\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star\" [class.filled]=\"isStarFilled(star)\"\r\n        [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\r\n    <div class=\"generated-value\">{{ value || '-' }}</div>\r\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div class=\"upload-drop-zone\" [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\"\r\n      [class.is-invalid]=\"errorMessage\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onFileDrop($event)\" (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"upload-icon-wrap\">\r\n        <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text\">Drag and drop files here or <span class=\"upload-link\">click to upload</span></p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported formats:\r\n        <span class=\"upload-formats\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\" class=\"uploaded-item\" [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner (shown while API call is in progress) -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner\"></div>\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <!-- File type icon -->\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n\r\n          <!-- Image thumbnail (only for images) -->\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb\" alt=\"preview\">\r\n\r\n          <!-- Name & size -->\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Remove button \u2014 disabled while uploading -->\r\n        <lib-button [variant]=\"'danger-outline'\" [disabled]=\"f.isUploading\"\r\n          (click)=\"!f.isUploading && removeUploadedFile(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header\">\r\n          <h3 class=\"mu-title\">\r\n            {{ config.label }}\r\n            <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span class=\"mu-badge\" *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description\" *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown\" *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--video\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--device\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] || 'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--library\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] || 'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel\" *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div class=\"media-upload-status\" *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section\" *ngIf=\"mediaItems.length\">\r\n          <div class=\"media-carousel-main\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--prev\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer\" *ngFor=\"let item of mediaItems; let i = index\"\r\n              [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\" class=\"carousel-uploading\">\r\n                <div class=\"carousel-spinner\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe\" [src]=\"item.url | trustedUrl\" frameborder=\"0\" allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\" class=\"carousel-remove-btn\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--next\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\" class=\"carousel-dot\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\" class=\"media-thumb\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\" class=\"thumb-uploading\">\r\n                <div class=\"thumb-spinner\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div class=\"mu-right-empty\" *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal\" *ngIf=\"showLibraryModal\" role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header\">\r\n      <div class=\"header-left\">\r\n        <h3 class=\"library-modal-title\">\r\n          {{ controller.labels['LBL_ADD_IMAGES'] || 'Add Images' }}\r\n        </h3>\r\n        <p class=\"library-modal-subtitle\">\r\n          {{ controller.labels['LBL_LIBRARY_MODAL_DESC'] || 'Upload media to make your opportunity stand out. Plus, take full control of your sequence - drag images to reorder as you desire.' }}\r\n        </p>\r\n      </div>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\" class=\"library-close-btn\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error\" *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item\" [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img\" alt=\"Library image\">\r\n        <div class=\"library-check\" *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div class=\"library-empty\" *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"library-modal-footer\">\r\n      <div class=\"library-footer-actions\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_CONTINUE'] || 'Continue' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs\">\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel\">\r\n\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\" class=\"loc-venue-item\">\r\n          <mat-icon class=\"loc-venue-search-icon\">search</mat-icon>\r\n          <span class=\"loc-venue-text\">{{ venue.address || venue.name || venue.description }}</span>\r\n          <button type=\"button\" class=\"loc-action-btn loc-delete-btn\" (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text\" *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper\">\r\n          <mat-icon class=\"loc-search-icon\">search</mat-icon>\r\n          <input class=\"field-input loc-search-input\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel\" *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\" class=\"loc-suggestion-item\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\" class=\"loc-add-btn\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container\" *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame\" [style.height]=\"config.locationConfig?.mapHeight || '300px'\"\r\n            [src]=\"getLocationMapEmbedUrl() | trustedUrl\" frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel\">\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper\">\r\n        <mat-icon class=\"loc-search-icon\">link</mat-icon>\r\n        <input class=\"field-input loc-search-input\" type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\" class=\"loc-panel loc-tba-panel\">\r\n      <div class=\"loc-tba-content\">\r\n        <mat-icon class=\"loc-tba-icon\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".form-field{margin-bottom:var(--cc-sf-grid-gap, 16px)}.form-field.has-error .field-input{border-color:var(--cc-sf-error-border, #DC2626)}.form-row{display:flex;gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{display:block;color:var(--cc-sf-label-color, #202124);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-label-weight, 500);font-size:var(--cc-sf-label-size, 18px);line-height:var(--cc-sf-label-line-height, 100%);letter-spacing:var(--cc-sf-label-letter-spacing, 0%);margin-bottom:.5rem}.field-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.field-input{width:100%;opacity:var(--cc-sf-input-opacity, 1);gap:var(--cc-sf-input-gap, 10px);padding-top:var(--cc-sf-input-padding-y, .625rem);padding-bottom:var(--cc-sf-input-padding-y, .625rem);padding-left:var(--cc-sf-input-padding-x, 16px);padding-right:var(--cc-sf-input-padding-x, 16px);font-size:var(--cc-sf-input-font-size, .875rem);line-height:var(--cc-sf-input-line-height, 1.5);color:var(--cc-sf-input-color, #111827);background-color:var(--cc-sf-input-bg, #ffffff);border:var(--cc-sf-input-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);box-shadow:var(--cc-sf-input-shadow, none);transition:var(--cc-sf-input-transition, all .2s ease);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.field-input::placeholder{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 16px);line-height:var(--cc-sf-placeholder-line-height, 100%);letter-spacing:var(--cc-sf-placeholder-letter-spacing, 0%);color:var(--cc-sf-input-placeholder, #9CA3AF)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border, #3B82F6);box-shadow:var(--cc-sf-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, .12))}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.field-input.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.field-input.is-invalid:focus{box-shadow:var(--cc-sf-error-focus-shadow, 0 0 0 3px rgba(220, 38, 38, .1))}.field-input.textarea{resize:vertical;min-height:100px;font-family:var(--cc-sf-font-family, inherit)}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.field-hint{font-size:var(--cc-sf-hint-size, .75rem);color:var(--cc-sf-hint-color, #6B7280)}.char-count-hint{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:400;font-style:normal;font-size:14px;line-height:100%;letter-spacing:.02em;text-align:right;color:var(--cc-sf-hint-color, #6B7280);margin-top:4px}.field-error{font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:8px}.radio-group.layout-column,.checkbox-group.layout-column{display:grid!important;grid-template-columns:repeat(12,1fr);gap:16px;width:100%}.radio-group.layout-row,.checkbox-group.layout-row{flex-direction:column!important;gap:12px;width:100%}.radio-group.layout-row .card-item,.checkbox-group.layout-row .card-item{width:100%}.radio-label,.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--cc-sf-label-size, .875rem);color:var(--cc-sf-label-color, #111827)}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #F05A28)}.radio-label.card-item,.checkbox-label.card-item{display:flex!important;flex-direction:row-reverse!important;justify-content:space-between!important;align-items:center!important;border:1px solid #E5E7EB;border-radius:12px;padding:16px 20px;box-sizing:border-box;transition:all .2s ease;background:#fff;margin-bottom:0}.radio-label.card-item input,.checkbox-label.card-item input{margin-left:16px}.radio-label.card-item.selected,.checkbox-label.card-item.selected{border-color:#f05a28;background-color:#f05a280d}.radio-label.card-item .option-content,.checkbox-label.card-item .option-content{display:flex;flex-direction:column;gap:4px;flex:1;text-align:left}.radio-label.card-item .option-content .label-text,.checkbox-label.card-item .option-content .label-text{font-weight:var(--cc-sf-label-weight, 500);font-size:16px;color:#1f2937}.radio-label.card-item .option-content .option-hint,.checkbox-label.card-item .option-content .option-hint{font-size:13px;color:#6b7280}.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:var(--cc-sf-chip-padding, 6px 14px);background:var(--cc-sf-chip-bg, #ffffff);color:var(--cc-sf-chip-color, #374151);border:var(--cc-sf-chip-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-chip-radius, 20px);cursor:pointer;font-size:var(--cc-sf-font-size-base, .875rem);transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-chip-selected-bg, #3B82F6);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-chip-selected-border, #3B82F6)}.switch-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch{position:relative;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on, #3B82F6)}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--cc-sf-switch-track-off, #D1D5DB);transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb, #ffffff);transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{display:inline-flex;align-items:center;cursor:pointer;transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper{position:relative;display:flex;align-items:center}.password-wrapper .password-input{padding-right:2.75rem;width:100%}.password-wrapper .password-toggle{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.25rem;line-height:1;color:var(--cc-sf-hint-color, #6B7280);display:flex;align-items:center;justify-content:center;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.generated-value{padding:var(--cc-sf-generated-padding, .625rem .875rem);background:var(--cc-sf-generated-bg, #F3F4F6);border:var(--cc-sf-generated-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-generated-radius, 8px);font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-generated-color, #6B7280);font-family:var(--cc-sf-font-family, inherit)}.group-section-wrapper{margin-bottom:var(--cc-sf-section-gap, 20px);border:var(--cc-sf-section-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-radius, 10px);padding:var(--cc-sf-section-padding, 20px);background-color:var(--cc-sf-section-bg, #ffffff);box-shadow:var(--cc-sf-section-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-instance{position:relative;margin-bottom:16px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper .group-instance .group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .group-instance .group-header .group-number{font-weight:500;color:var(--cc-sf-instance-num-color, #4B5563);font-size:var(--cc-sf-instance-num-size, .8125rem)}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .group-label{border:none;padding-bottom:0;margin-bottom:0}.group-section-wrapper.multi-save-active .multi-save-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{background:var(--ms-card-bg, #ffffff);border:1px solid var(--ms-card-border, #E5E7EB);border-radius:var(--ms-card-radius, 10px);box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05));padding:0;margin-bottom:16px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content{flex:1;display:flex;flex-direction:column;gap:4px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{font-size:1rem;font-weight:600;color:var(--ms-title-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{font-size:.875rem;color:var(--ms-desc-color, #6B7280);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions{display:flex;align-items:center;gap:16px;margin-left:20px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--cc-sf-instance-divider, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer .footer-actions{display:flex;gap:12px}.btn-remove{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:var(--cc-sf-error-text-size, .75rem);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px 16px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);background-color:var(--cc-sf-dropzone-bg, #FFFAF1);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;text-align:center;-webkit-user-select:none;user-select:none}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap{margin-bottom:4px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:56px;width:56px;height:56px;line-height:56px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-main-text{font-size:.9rem;font-weight:600;color:var(--cc-sf-label-color, #1E293B);margin:0}.upload-main-text .upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-hint-text{font-size:.78rem;color:var(--cc-sf-dropzone-hint-color, #64748B);margin:0}.upload-hint-text .upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.uploaded-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.uploaded-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}.uploaded-item .file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.uploaded-item .file-info .file-name{font-size:.85rem;font-weight:500;color:var(--cc-sf-label-color, #1E293B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uploaded-item .file-info .file-size{font-size:.72rem;color:var(--cc-sf-hint-color, #94A3B8)}.uploaded-item .file-remove-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:4px;border-radius:4px;flex-shrink:0;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover{color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border:2px solid var(--cc-sf-spinner-track, #E2E8F0);border-top-color:var(--cc-sf-spinner-color, #3B82F6);border-radius:50%;animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.rich-text-editor{display:block;width:100%}.uploading-label{color:var(--cc-sf-spinner-color, #3B82F6)!important;font-style:italic}.input-group{position:relative;display:flex;align-items:stretch;width:100%}.input-group .field-input{flex:1;border-radius:var(--cc-sf-input-radius, 8px)}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);cursor:default;padding-right:3.5rem}.input-group.readonly .input-prefix,.input-group.readonly .input-suffix{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)}.input-prefix,.input-suffix{display:flex;align-items:center;padding:0 .875rem;background-color:var(--cc-sf-input-bg, #FFFFFF);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);color:var(--cc-sf-hint-color, #6B7280);font-size:var(--cc-sf-input-font-size, .875rem);white-space:nowrap;-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px);color:var(--cc-sf-chip-selected-bg, #3B82F6);font-weight:500}.readonly-icons{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper{margin-bottom:var(--cc-sf-grid-gap, 16px)}.subfields-group-wrapper .group-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:600;color:var(--cc-sf-label-color, #111827);margin-bottom:.75rem}.subfields-group-wrapper .group-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.subfields-group-wrapper .subfields-row{display:flex;align-items:flex-end;gap:12px;border-radius:var(--cc-sf-input-radius, 8px);transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{flex:1;min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{margin-bottom:24px;font-weight:700;color:#94a3b8}.subfields-group-wrapper .subfields-group-error{display:block;margin-top:6px;font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}.autocomplete-wrapper .ac-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-input{flex:1;padding-left:2.4rem;padding-right:2.4rem}.autocomplete-wrapper .ac-clear-btn{position:absolute;right:.6rem;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:.2rem;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-input-focus-border, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.ac-no-results{font-style:italic;font-size:.8125rem;color:var(--cc-sf-hint-color, #6B7280)}.media-upload-wrapper{padding:0;border:none;background:none}.mu-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:flex-start}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-left{display:flex;flex-direction:column;gap:20px}.mu-header{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px}.mu-title{margin:0;font-size:1.35rem;font-weight:700;color:var(--cc-sf-label-color, #111827);line-height:1.3}.mu-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;background:var(--cc-sf-label-color, #111827);color:#fff;font-size:.72rem;font-weight:600;white-space:nowrap;flex-shrink:0}.mu-description{margin:0;font-size:.875rem;color:var(--cc-sf-hint-color, #6B7280);line-height:1.6}.mu-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.mu-feature-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--cc-sf-hint-color, #374151)}.mu-feature-item .mu-check{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--cc-sf-chip-selected-bg, #3B82F6);flex-shrink:0}.mu-right{display:flex;flex-direction:column;gap:12px;min-height:260px}.mu-right-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:250px;max-width:400px;border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1);border-radius:var(--mu-carousel-radius, 12px);background:var(--cc-sf-dropzone-bg, #FFFAF1);text-align:center;color:var(--cc-sf-hint-color, #94A3B8);padding:24px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{font-size:52px;width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{position:relative;display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{font-size:18px;width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:200;min-width:240px;background:var(--mu-dropdown-bg, #ffffff);border:var(--mu-dropdown-border, 1px solid #E5E7EB);border-radius:12px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));overflow:hidden;animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:none;border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);cursor:pointer;text-align:left;transition:background .15s ease;font-family:var(--cc-sf-font-family, inherit)}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{display:flex;flex-direction:column;gap:2px;flex:1}.media-drop-label{font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.media-drop-desc{font-size:.75rem;color:var(--cc-sf-hint-color, #6B7280)}.youtube-input-panel{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--cc-sf-dropzone-bg, #FFFAF1);border:1px solid var(--cc-sf-input-border, #E5E7EB);border-radius:10px;animation:mu-fade-in .18s ease}.youtube-panel-label{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{display:flex;gap:8px;align-items:stretch}.youtube-input-row .youtube-url-input{flex:1}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-top:4px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);border-radius:8px;font-size:.85rem;font-weight:500;animation:mu-fade-in .2s ease}.media-upload-status .status-icon{font-size:18px;width:18px;height:18px;line-height:18px}.media-carousel-section{display:flex;flex-direction:column;gap:12px}.media-carousel-main{position:relative;width:100%;max-width:400px;height:var(--mu-carousel-height, 250px);background:var(--mu-carousel-bg, #0F172A);border-radius:var(--mu-carousel-radius, 12px);overflow:hidden;display:flex;align-items:center;justify-content:center}.carousel-viewer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.carousel-viewer .carousel-image{width:100%;height:100%;object-fit:cover;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-iframe{width:100%;height:100%;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-uploading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#94a3b8;font-size:.85rem}.carousel-viewer .carousel-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:#ffffffd9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{position:absolute;top:10px;right:10px;z-index:10;width:32px;height:32px;border-radius:50%;background:#0000008c;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:10}.carousel-dot{width:8px;height:8px;border-radius:50%;background:#ffffff73;cursor:pointer;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{display:flex;flex-wrap:wrap;max-width:400px;gap:8px;overflow-x:auto;padding-bottom:4px}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--mu-thumb-bg, #E2E8F0);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, #3B82F6);transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{width:100%;height:100%;object-fit:cover}.media-thumb .thumb-yt-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#1e293b;color:#ef4444}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border:2px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;background:var(--mu-modal-bg, #ffffff);border-radius:var(--mu-modal-radius, 16px);box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));display:flex;flex-direction:column;overflow:hidden;animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 28px;border-bottom:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);flex-shrink:0}.library-modal-header .header-left{display:flex;flex-direction:column;gap:8px}.library-modal-title{margin:0;font-size:1.25rem;font-weight:700;color:#111827}.library-modal-subtitle{margin:0;font-size:.85rem;color:#6b7280;line-height:1.5;max-width:600px}.library-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading,.library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--cc-sf-hint-color, #9CA3AF);font-size:.875rem;flex:1}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border:3px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.library-error{display:flex;align-items:center;gap:8px;padding:16px 24px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);font-size:.875rem;flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:28px;overflow-y:auto;flex:1;background:#f9fafb}.library-grid::-webkit-scrollbar{width:8px}.library-grid::-webkit-scrollbar-track{background:#f1f1f1}.library-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px;border:2px solid #F1F1F1}.library-grid-item{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;cursor:pointer;border:3px solid transparent;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.library-grid-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.library-grid-item.selected{border-color:#3b82f6}.library-grid-item.selected .library-grid-img{opacity:.7}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{width:100%;height:100%;object-fit:cover;display:block}.library-overlay-hover{position:absolute;inset:0;background:#3b82f61f;opacity:0;transition:opacity .15s ease}.library-check{position:absolute;top:6px;right:6px;color:var(--cc-sf-chip-selected-bg, #3B82F6);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{display:flex;align-items:center;justify-content:flex-end;padding:20px 28px;background:#fff;border-top:1px solid #E5E7EB;flex-shrink:0}.library-modal-footer .library-footer-actions{display:flex;gap:12px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary{background-color:#3b82f6!important;border-color:#3b82f6!important;color:#fff!important;font-weight:600;padding-left:32px;padding-right:32px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:hover{background-color:#2563eb!important}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:disabled{background-color:#93c5fd!important;cursor:not-allowed}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline{font-weight:600;padding-left:24px;padding-right:24px;border-color:#d1d5db;color:#374151}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline:hover{background-color:#f9fafb}.library-selected-count{font-size:.875rem;font-weight:600;color:var(--cc-sf-hint-color, #6B7280)}.library-footer-actions{display:flex;gap:10px}.location-field-wrapper{gap:12px}.location-subtitle{margin:0;font-size:var(--cc-sf-hint-size, .8125rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.5}.location-tabs{display:flex;gap:12px;margin-bottom:24px}.loc-tab-btn{flex:1}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:#fff!important;color:#000!important;border:1px solid #E5E7EB}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:#f3f4f6!important}.loc-panel{display:flex;flex-direction:column;gap:12px}.loc-section-label{margin:0;font-size:var(--cc-sf-label-size, .9rem);font-weight:600;color:var(--cc-sf-label-color, #111827)}.loc-venue-list{display:flex;flex-direction:column;gap:8px}.loc-venue-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--loc-venue-item-bg, #ffffff);border:1px solid var(--loc-venue-item-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--cc-sf-hint-color, #9CA3AF);flex-shrink:0}.loc-venue-text{flex:1;font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-input-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-action-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-count-text{margin:0;font-size:.8125rem;font-weight:600;color:var(--cc-sf-input-focus-border, #3B82F6)}.loc-search-container{position:relative}.loc-search-wrapper{position:relative;display:flex;align-items:center}.loc-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1}.loc-search-input{flex:1;padding-left:2.4rem!important}.loc-suggestions-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:300;background:var(--loc-suggestion-bg, #ffffff);border:1px solid var(--cc-sf-input-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 8px);box-shadow:0 8px 24px #0000001a;overflow:hidden;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .12s ease;font-family:var(--cc-sf-font-family, inherit)}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--loc-delete-color, #E53E3E);flex-shrink:0}.loc-suggestion-text{font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-label-color, #374151);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-add-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--loc-add-color, #1A56DB);font-family:var(--cc-sf-font-family, inherit);font-size:var(--cc-sf-input-font-size, .875rem);font-weight:600;padding:0;transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{border-radius:var(--loc-map-radius, 10px);overflow:hidden;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);box-shadow:0 2px 10px #0000000f}.loc-map-frame{width:100%;display:block;border:none}.loc-map-hint{margin:0;font-size:.78rem;color:var(--cc-sf-hint-color, #6B7280);text-align:center}.loc-tba-panel{min-height:120px;justify-content:center}.loc-tba-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 24px;background:var(--loc-tba-bg, #F9FAFB);border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 10px)}.loc-tba-icon{font-size:40px;width:40px;height:40px;line-height:40px;color:var(--loc-tba-icon-color, #9CA3AF);opacity:.6}.loc-tba-text{margin:0;font-size:var(--cc-sf-input-font-size, .9rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.6;max-width:360px}.loc-online-panel .loc-search-wrapper{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }, { kind: "pipe", type: TrustedUrlPipe, name: "trustedUrl" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-field', standalone: false, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\" class=\"group-section-wrapper\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save Header with Add button (top-right style) -->\r\n    <div class=\"multi-save-header\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard Header for non-multiSave -->\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\" class=\"group-instance\"\r\n      [class.is-editing]=\"instance.isEditing\"\r\n      [class.is-card]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n\r\n      <!-- 1. EDIT MODE / UNSAVED / STANDARD STATE -->\r\n      <div [hidden]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <!-- Instance header \u2014 show remove only when more than 1 instance -->\r\n        <div class=\"group-header\" *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active && instanceList.length > 1\">\r\n          <span class=\"group-number\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          <lib-button [variant]=\"'danger-outline'\" [icon]=\"{type: 'material', value: 'delete_outline'}\"\r\n            (click)=\"removeGroupInstance(i)\">\r\n            {{ removeLabel }}\r\n          </lib-button>\r\n        </div>\r\n\r\n        <div class=\"group-fields sf-grid\">\r\n          <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n            <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n              <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\" [allowMulti]=\"true\">\r\n              </lib-form-field>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- SAVE / CANCEL BUTTONS for MultiSave in Editing phase -->\r\n        <div class=\"group-footer\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n          <span class=\"field-error\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n          <div class=\"footer-actions\">\r\n            <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n            <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 2. CARD VIEW (Saved State) -->\r\n      <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <div class=\"card-view\" [class.is-expanded]=\"instance.isExpanded\">\r\n          <div class=\"card-content\">\r\n            <span class=\"card-title\">{{ instance.fg.get(config.sectionConfig.multiSaveConfig.summaryField || '')?.value\r\n              || '\u2014' }}</span>\r\n            <!-- <span class=\"card-desc\" *ngIf=\"config.sectionConfig.multiSaveConfig.descriptionField\"\r\n              [innerHTML]=\"instance.fg.get(config.sectionConfig.multiSaveConfig.descriptionField)?.value\">\r\n            </span> -->\r\n          </div>\r\n          <div class=\"card-actions\">\r\n            <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n            <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n            <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n              {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Standard Add Button for non-multiSave -->\r\n    <lib-button *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\" [variant]=\"'outline'\"\r\n      [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\" class=\"btn-add-group-wrapper\">\r\n      {{ addLabel }} {{ config.sectionConfig!.label }}\r\n    </lib-button>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\" class=\"password-toggle\" (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min\" [max]=\"config.numberConfig?.max\" [step]=\"config.numberConfig?.step || 1\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper\" *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper\" [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\" class=\"ac-clear-btn\" *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          {{ option.label }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST'\" class=\"checkbox-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"chip-label\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container\">\r\n      <span class=\"field-label\">{{ config.label }}</span>\r\n      <div class=\"switch\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star\" [class.filled]=\"isStarFilled(star)\"\r\n        [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\r\n    <div class=\"generated-value\">{{ value || '-' }}</div>\r\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div class=\"upload-drop-zone\" [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\"\r\n      [class.is-invalid]=\"errorMessage\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onFileDrop($event)\" (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"upload-icon-wrap\">\r\n        <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text\">Drag and drop files here or <span class=\"upload-link\">click to upload</span></p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported formats:\r\n        <span class=\"upload-formats\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\" class=\"uploaded-item\" [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner (shown while API call is in progress) -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner\"></div>\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <!-- File type icon -->\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n\r\n          <!-- Image thumbnail (only for images) -->\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb\" alt=\"preview\">\r\n\r\n          <!-- Name & size -->\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Remove button \u2014 disabled while uploading -->\r\n        <lib-button [variant]=\"'danger-outline'\" [disabled]=\"f.isUploading\"\r\n          (click)=\"!f.isUploading && removeUploadedFile(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header\">\r\n          <h3 class=\"mu-title\">\r\n            {{ config.label }}\r\n            <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span class=\"mu-badge\" *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description\" *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown\" *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--video\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--device\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] || 'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--library\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] || 'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel\" *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div class=\"media-upload-status\" *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section\" *ngIf=\"mediaItems.length\">\r\n          <div class=\"media-carousel-main\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--prev\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer\" *ngFor=\"let item of mediaItems; let i = index\"\r\n              [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\" class=\"carousel-uploading\">\r\n                <div class=\"carousel-spinner\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe\" [src]=\"item.url | trustedUrl\" frameborder=\"0\" allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\" class=\"carousel-remove-btn\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--next\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\" class=\"carousel-dot\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\" class=\"media-thumb\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\" class=\"thumb-uploading\">\r\n                <div class=\"thumb-spinner\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div class=\"mu-right-empty\" *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal\" *ngIf=\"showLibraryModal\" role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header\">\r\n      <h3 class=\"library-modal-title\">\r\n        <mat-icon>photo_library</mat-icon>\r\n        {{ controller.labels['LBL_LIBRARY_TITLE'] || 'Media Library' }}\r\n      </h3>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\" class=\"library-close-btn\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error\" *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item\" [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img\" alt=\"Library image\">\r\n        <div class=\"library-check\" *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div class=\"library-empty\" *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"library-modal-footer\">\r\n      <span class=\"library-selected-count\">\r\n        {{ librarySelectedIds.size }} {{ controller.labels['LBL_LIBRARY_SELECTED'] || 'selected' }}\r\n      </span>\r\n      <div class=\"library-footer-actions\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_LIBRARY_ADD_SELECTED'] || 'Add Selected' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs\">\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel\">\r\n\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\" class=\"loc-venue-item\">\r\n          <mat-icon class=\"loc-venue-search-icon\">search</mat-icon>\r\n          <span class=\"loc-venue-text\">{{ venue.address || venue.name || venue.description }}</span>\r\n          <button type=\"button\" class=\"loc-action-btn loc-delete-btn\" (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text\" *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper\">\r\n          <mat-icon class=\"loc-search-icon\">search</mat-icon>\r\n          <input class=\"field-input loc-search-input\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel\" *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\" class=\"loc-suggestion-item\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\" class=\"loc-add-btn\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container\" *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame\" [style.height]=\"config.locationConfig?.mapHeight || '300px'\"\r\n            [src]=\"getLocationMapEmbedUrl() | trustedUrl\" frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel\">\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper\">\r\n        <mat-icon class=\"loc-search-icon\">link</mat-icon>\r\n        <input class=\"field-input loc-search-input\" type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\" class=\"loc-panel loc-tba-panel\">\r\n      <div class=\"loc-tba-content\">\r\n        <mat-icon class=\"loc-tba-icon\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".form-field{margin-bottom:var(--cc-sf-grid-gap, 16px)}.form-field.has-error .field-input{border-color:var(--cc-sf-error-border, #DC2626)}.form-row{display:flex;gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{display:block;color:var(--cc-sf-label-color, #202124);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-label-weight, 500);font-size:var(--cc-sf-label-size, 18px);line-height:var(--cc-sf-label-line-height, 100%);letter-spacing:var(--cc-sf-label-letter-spacing, 0%);margin-bottom:.5rem}.field-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.field-input{width:100%;opacity:var(--cc-sf-input-opacity, 1);gap:var(--cc-sf-input-gap, 10px);padding-top:var(--cc-sf-input-padding-y, .625rem);padding-bottom:var(--cc-sf-input-padding-y, .625rem);padding-left:var(--cc-sf-input-padding-x, 16px);padding-right:var(--cc-sf-input-padding-x, 16px);font-size:var(--cc-sf-input-font-size, .875rem);line-height:var(--cc-sf-input-line-height, 1.5);color:var(--cc-sf-input-color, #111827);background-color:var(--cc-sf-input-bg, #ffffff);border:var(--cc-sf-input-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);box-shadow:var(--cc-sf-input-shadow, none);transition:var(--cc-sf-input-transition, all .2s ease);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.field-input::placeholder{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 16px);line-height:var(--cc-sf-placeholder-line-height, 100%);letter-spacing:var(--cc-sf-placeholder-letter-spacing, 0%);color:var(--cc-sf-input-placeholder, #9CA3AF)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border, #3B82F6);box-shadow:var(--cc-sf-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, .12))}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.field-input.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.field-input.is-invalid:focus{box-shadow:var(--cc-sf-error-focus-shadow, 0 0 0 3px rgba(220, 38, 38, .1))}.field-input.textarea{resize:vertical;min-height:100px;font-family:var(--cc-sf-font-family, inherit)}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.field-hint{font-size:var(--cc-sf-hint-size, .75rem);color:var(--cc-sf-hint-color, #6B7280)}.char-count-hint{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:400;font-style:normal;font-size:14px;line-height:100%;letter-spacing:.02em;text-align:right;color:var(--cc-sf-hint-color, #6B7280);margin-top:4px}.field-error{font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:8px}.radio-label,.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--cc-sf-label-size, .875rem);color:var(--cc-sf-label-color, #111827)}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #3B82F6)}.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:var(--cc-sf-chip-padding, 6px 14px);background:var(--cc-sf-chip-bg, #ffffff);color:var(--cc-sf-chip-color, #374151);border:var(--cc-sf-chip-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-chip-radius, 20px);cursor:pointer;font-size:var(--cc-sf-font-size-base, .875rem);transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-chip-selected-bg, #3B82F6);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-chip-selected-border, #3B82F6)}.switch-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch{position:relative;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on, #3B82F6)}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--cc-sf-switch-track-off, #D1D5DB);transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb, #ffffff);transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{display:inline-flex;align-items:center;cursor:pointer;transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper{position:relative;display:flex;align-items:center}.password-wrapper .password-input{padding-right:2.75rem;width:100%}.password-wrapper .password-toggle{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.25rem;line-height:1;color:var(--cc-sf-hint-color, #6B7280);display:flex;align-items:center;justify-content:center;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.generated-value{padding:var(--cc-sf-generated-padding, .625rem .875rem);background:var(--cc-sf-generated-bg, #F3F4F6);border:var(--cc-sf-generated-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-generated-radius, 8px);font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-generated-color, #6B7280);font-family:var(--cc-sf-font-family, inherit)}.group-section-wrapper{margin-bottom:var(--cc-sf-section-gap, 20px);border:var(--cc-sf-section-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-radius, 10px);padding:var(--cc-sf-section-padding, 20px);background-color:var(--cc-sf-section-bg, #ffffff);box-shadow:var(--cc-sf-section-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-instance{position:relative;margin-bottom:16px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper .group-instance .group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .group-instance .group-header .group-number{font-weight:500;color:var(--cc-sf-instance-num-color, #4B5563);font-size:var(--cc-sf-instance-num-size, .8125rem)}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .group-label{border:none;padding-bottom:0;margin-bottom:0}.group-section-wrapper.multi-save-active .multi-save-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{background:var(--ms-card-bg, #ffffff);border:1px solid var(--ms-card-border, #E5E7EB);border-radius:var(--ms-card-radius, 10px);box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05));padding:0;margin-bottom:16px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content{flex:1;display:flex;flex-direction:column;gap:4px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{font-size:1rem;font-weight:600;color:var(--ms-title-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{font-size:.875rem;color:var(--ms-desc-color, #6B7280);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions{display:flex;align-items:center;gap:16px;margin-left:20px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--cc-sf-instance-divider, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer .footer-actions{display:flex;gap:12px}.btn-remove{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:var(--cc-sf-error-text-size, .75rem);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px 16px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);background-color:var(--cc-sf-dropzone-bg, #FFFAF1);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;text-align:center;-webkit-user-select:none;user-select:none}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap{margin-bottom:4px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:56px;width:56px;height:56px;line-height:56px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-main-text{font-size:.9rem;font-weight:600;color:var(--cc-sf-label-color, #1E293B);margin:0}.upload-main-text .upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-hint-text{font-size:.78rem;color:var(--cc-sf-dropzone-hint-color, #64748B);margin:0}.upload-hint-text .upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.uploaded-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.uploaded-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}.uploaded-item .file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.uploaded-item .file-info .file-name{font-size:.85rem;font-weight:500;color:var(--cc-sf-label-color, #1E293B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uploaded-item .file-info .file-size{font-size:.72rem;color:var(--cc-sf-hint-color, #94A3B8)}.uploaded-item .file-remove-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:4px;border-radius:4px;flex-shrink:0;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover{color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border:2px solid var(--cc-sf-spinner-track, #E2E8F0);border-top-color:var(--cc-sf-spinner-color, #3B82F6);border-radius:50%;animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.rich-text-editor{display:block;width:100%}.uploading-label{color:var(--cc-sf-spinner-color, #3B82F6)!important;font-style:italic}.input-group{position:relative;display:flex;align-items:stretch;width:100%}.input-group .field-input{flex:1;border-radius:var(--cc-sf-input-radius, 8px)}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);cursor:default;padding-right:3.5rem}.input-group.readonly .input-prefix,.input-group.readonly .input-suffix{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)}.input-prefix,.input-suffix{display:flex;align-items:center;padding:0 .875rem;background-color:var(--cc-sf-input-bg, #FFFFFF);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);color:var(--cc-sf-hint-color, #6B7280);font-size:var(--cc-sf-input-font-size, .875rem);white-space:nowrap;-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px);color:var(--cc-sf-chip-selected-bg, #3B82F6);font-weight:500}.readonly-icons{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper{margin-bottom:var(--cc-sf-grid-gap, 16px)}.subfields-group-wrapper .group-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:600;color:var(--cc-sf-label-color, #111827);margin-bottom:.75rem}.subfields-group-wrapper .group-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.subfields-group-wrapper .subfields-row{display:flex;align-items:flex-end;gap:12px;border-radius:var(--cc-sf-input-radius, 8px);transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{flex:1;min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{margin-bottom:24px;font-weight:700;color:#94a3b8}.subfields-group-wrapper .subfields-group-error{display:block;margin-top:6px;font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}.autocomplete-wrapper .ac-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-input{flex:1;padding-left:2.4rem;padding-right:2.4rem}.autocomplete-wrapper .ac-clear-btn{position:absolute;right:.6rem;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:.2rem;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-input-focus-border, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.ac-no-results{font-style:italic;font-size:.8125rem;color:var(--cc-sf-hint-color, #6B7280)}.media-upload-wrapper{padding:0;border:none;background:none}.mu-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:flex-start}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-left{display:flex;flex-direction:column;gap:20px}.mu-header{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px}.mu-title{margin:0;font-size:1.35rem;font-weight:700;color:var(--cc-sf-label-color, #111827);line-height:1.3}.mu-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;background:var(--cc-sf-label-color, #111827);color:#fff;font-size:.72rem;font-weight:600;white-space:nowrap;flex-shrink:0}.mu-description{margin:0;font-size:.875rem;color:var(--cc-sf-hint-color, #6B7280);line-height:1.6}.mu-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.mu-feature-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--cc-sf-hint-color, #374151)}.mu-feature-item .mu-check{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--cc-sf-chip-selected-bg, #3B82F6);flex-shrink:0}.mu-right{display:flex;flex-direction:column;gap:12px;min-height:260px}.mu-right-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:250px;max-width:400px;border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1);border-radius:var(--mu-carousel-radius, 12px);background:var(--cc-sf-dropzone-bg, #FFFAF1);text-align:center;color:var(--cc-sf-hint-color, #94A3B8);padding:24px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{font-size:52px;width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{position:relative;display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{font-size:18px;width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:200;min-width:240px;background:var(--mu-dropdown-bg, #ffffff);border:var(--mu-dropdown-border, 1px solid #E5E7EB);border-radius:12px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));overflow:hidden;animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:none;border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);cursor:pointer;text-align:left;transition:background .15s ease;font-family:var(--cc-sf-font-family, inherit)}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{display:flex;flex-direction:column;gap:2px;flex:1}.media-drop-label{font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.media-drop-desc{font-size:.75rem;color:var(--cc-sf-hint-color, #6B7280)}.youtube-input-panel{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--cc-sf-dropzone-bg, #FFFAF1);border:1px solid var(--cc-sf-input-border, #E5E7EB);border-radius:10px;animation:mu-fade-in .18s ease}.youtube-panel-label{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{display:flex;gap:8px;align-items:stretch}.youtube-input-row .youtube-url-input{flex:1}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-top:4px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);border-radius:8px;font-size:.85rem;font-weight:500;animation:mu-fade-in .2s ease}.media-upload-status .status-icon{font-size:18px;width:18px;height:18px;line-height:18px}.media-carousel-section{display:flex;flex-direction:column;gap:12px}.media-carousel-main{position:relative;width:100%;max-width:400px;height:var(--mu-carousel-height, 250px);background:var(--mu-carousel-bg, #0F172A);border-radius:var(--mu-carousel-radius, 12px);overflow:hidden;display:flex;align-items:center;justify-content:center}.carousel-viewer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.carousel-viewer .carousel-image{width:100%;height:100%;object-fit:cover;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-iframe{width:100%;height:100%;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-uploading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#94a3b8;font-size:.85rem}.carousel-viewer .carousel-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:#ffffffd9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{position:absolute;top:10px;right:10px;z-index:10;width:32px;height:32px;border-radius:50%;background:#0000008c;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:10}.carousel-dot{width:8px;height:8px;border-radius:50%;background:#ffffff73;cursor:pointer;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{display:flex;flex-wrap:wrap;max-width:400px;gap:8px;overflow-x:auto;padding-bottom:4px}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--mu-thumb-bg, #E2E8F0);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, #3B82F6);transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{width:100%;height:100%;object-fit:cover}.media-thumb .thumb-yt-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#1e293b;color:#ef4444}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border:2px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;background:var(--mu-modal-bg, #ffffff);border-radius:var(--mu-modal-radius, 16px);box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));display:flex;flex-direction:column;overflow:hidden;animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);flex-shrink:0}.library-modal-title{display:flex;align-items:center;gap:8px;margin:0;font-size:1.05rem;font-weight:700;color:var(--cc-sf-label-color, #111827)}.library-modal-title mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:var(--mu-icon-library-color, #22C55E)}.library-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading,.library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--cc-sf-hint-color, #9CA3AF);font-size:.875rem;flex:1}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border:3px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.library-error{display:flex;align-items:center;gap:8px;padding:16px 24px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);font-size:.875rem;flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px;overflow-y:auto;flex:1}.library-grid::-webkit-scrollbar{width:6px}.library-grid::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:3px}.library-grid-item{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;transition:border-color .2s ease,transform .15s ease}.library-grid-item.selected{border-color:var(--cc-sf-chip-selected-bg, #3B82F6);transform:scale(.97)}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{width:100%;height:100%;object-fit:cover;display:block}.library-overlay-hover{position:absolute;inset:0;background:#3b82f61f;opacity:0;transition:opacity .15s ease}.library-check{position:absolute;top:6px;right:6px;color:var(--cc-sf-chip-selected-bg, #3B82F6);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 20px;border-top:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);flex-shrink:0}.library-selected-count{font-size:.875rem;font-weight:600;color:var(--cc-sf-hint-color, #6B7280)}.library-footer-actions{display:flex;gap:10px}.location-field-wrapper{gap:12px}.location-subtitle{margin:0;font-size:var(--cc-sf-hint-size, .8125rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.5}.location-tabs{display:flex;gap:12px;margin-bottom:24px}.loc-tab-btn{flex:1}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:#fff!important;color:#000!important;border:1px solid #E5E7EB}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:#f3f4f6!important}.loc-panel{display:flex;flex-direction:column;gap:12px}.loc-section-label{margin:0;font-size:var(--cc-sf-label-size, .9rem);font-weight:600;color:var(--cc-sf-label-color, #111827)}.loc-venue-list{display:flex;flex-direction:column;gap:8px}.loc-venue-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--loc-venue-item-bg, #ffffff);border:1px solid var(--loc-venue-item-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--cc-sf-hint-color, #9CA3AF);flex-shrink:0}.loc-venue-text{flex:1;font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-input-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-action-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-count-text{margin:0;font-size:.8125rem;font-weight:600;color:var(--cc-sf-input-focus-border, #3B82F6)}.loc-search-container{position:relative}.loc-search-wrapper{position:relative;display:flex;align-items:center}.loc-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1}.loc-search-input{flex:1;padding-left:2.4rem!important}.loc-suggestions-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:300;background:var(--loc-suggestion-bg, #ffffff);border:1px solid var(--cc-sf-input-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 8px);box-shadow:0 8px 24px #0000001a;overflow:hidden;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .12s ease;font-family:var(--cc-sf-font-family, inherit)}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--loc-delete-color, #E53E3E);flex-shrink:0}.loc-suggestion-text{font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-label-color, #374151);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-add-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--loc-add-color, #1A56DB);font-family:var(--cc-sf-font-family, inherit);font-size:var(--cc-sf-input-font-size, .875rem);font-weight:600;padding:0;transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{border-radius:var(--loc-map-radius, 10px);overflow:hidden;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);box-shadow:0 2px 10px #0000000f}.loc-map-frame{width:100%;display:block;border:none}.loc-map-hint{margin:0;font-size:.78rem;color:var(--cc-sf-hint-color, #6B7280);text-align:center}.loc-tba-panel{min-height:120px;justify-content:center}.loc-tba-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 24px;background:var(--loc-tba-bg, #F9FAFB);border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 10px)}.loc-tba-icon{font-size:40px;width:40px;height:40px;line-height:40px;color:var(--loc-tba-icon-color, #9CA3AF);opacity:.6}.loc-tba-text{margin:0;font-size:var(--cc-sf-input-font-size, .9rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.6;max-width:360px}.loc-online-panel .loc-search-wrapper{margin-top:4px}\n"] }]
+            args: [{ selector: 'lib-form-field', standalone: false, template: "<div class=\"form-field\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\" *ngIf=\"child.isEnabled !== false\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\" class=\"group-section-wrapper\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save Header with Add button (top-right style) -->\r\n    <div class=\"multi-save-header\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard Header for non-multiSave -->\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\" class=\"group-instance\"\r\n      [class.is-editing]=\"instance.isEditing\"\r\n      [class.is-card]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n\r\n      <!-- 1. EDIT MODE / UNSAVED / STANDARD STATE -->\r\n      <div [hidden]=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <!-- Instance header \u2014 show remove only when more than 1 instance -->\r\n        <div class=\"group-header\" *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active && instanceList.length > 1\">\r\n          <span class=\"group-number\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          <lib-button [variant]=\"'danger-outline'\" [icon]=\"{type: 'material', value: 'delete_outline'}\"\r\n            (click)=\"removeGroupInstance(i)\">\r\n            {{ removeLabel }}\r\n          </lib-button>\r\n        </div>\r\n\r\n        <div class=\"group-fields sf-grid\">\r\n          <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n            <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n              <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\" [allowMulti]=\"true\">\r\n              </lib-form-field>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- SAVE / CANCEL BUTTONS for MultiSave in Editing phase -->\r\n        <div class=\"group-footer\" *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n          <span class=\"field-error\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n          <div class=\"footer-actions\">\r\n            <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n            <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 2. CARD VIEW (Saved State) -->\r\n      <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active && !instance.isEditing\">\r\n        <div class=\"card-view\" [class.is-expanded]=\"instance.isExpanded\">\r\n          <div class=\"card-content\">\r\n            <span class=\"card-title\">{{ instance.fg.get(config.sectionConfig.multiSaveConfig.summaryField || '')?.value\r\n              || '\u2014' }}</span>\r\n            <!-- <span class=\"card-desc\" *ngIf=\"config.sectionConfig.multiSaveConfig.descriptionField\"\r\n              [innerHTML]=\"instance.fg.get(config.sectionConfig.multiSaveConfig.descriptionField)?.value\">\r\n            </span> -->\r\n          </div>\r\n          <div class=\"card-actions\">\r\n            <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n            <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n            <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n              {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Standard Add Button for non-multiSave -->\r\n    <lib-button *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\" [variant]=\"'outline'\"\r\n      [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\" class=\"btn-add-group-wrapper\">\r\n      {{ addLabel }} {{ config.sectionConfig!.label }}\r\n    </lib-button>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\" class=\"group-section-wrapper\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\" class=\"password-toggle\" (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min\" [max]=\"config.numberConfig?.max\" [step]=\"config.numberConfig?.step || 1\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix\" *ngIf=\"config.suffix\">{{ config.suffix }}</span>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper\" *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper\" [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\" class=\"ac-clear-btn\" *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          {{ option.label }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\" \r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"formGroup.get(config.name!)?.value === option.code\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <div class=\"option-content\">\r\n          <span class=\"label-text\">{{ option.label }}</span>\r\n          <span class=\"option-hint\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST' || config.subType === 'CARD'\" class=\"checkbox-group\" [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"checkbox-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"isChecked(option.code)\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <div class=\"option-content\">\r\n          <span class=\"label-text\">{{ option.label }}</span>\r\n          <span class=\"option-hint\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"chip-label\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container\">\r\n      <span class=\"field-label\">{{ config.label }}</span>\r\n      <div class=\"switch\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star\" [class.filled]=\"isStarFilled(star)\"\r\n        [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">{{ config.label }}</label>\r\n    <div class=\"generated-value\">{{ value || '-' }}</div>\r\n    <span class=\"field-hint\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div class=\"upload-drop-zone\" [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\"\r\n      [class.is-invalid]=\"errorMessage\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onFileDrop($event)\" (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"upload-icon-wrap\">\r\n        <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text\">Drag and drop files here or <span class=\"upload-link\">click to upload</span></p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported formats:\r\n        <span class=\"upload-formats\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\" class=\"uploaded-item\" [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner (shown while API call is in progress) -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner\"></div>\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <!-- File type icon -->\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n\r\n          <!-- Image thumbnail (only for images) -->\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb\" alt=\"preview\">\r\n\r\n          <!-- Name & size -->\r\n          <div class=\"file-info\">\r\n            <span class=\"file-name\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Remove button \u2014 disabled while uploading -->\r\n        <lib-button [variant]=\"'danger-outline'\" [disabled]=\"f.isUploading\"\r\n          (click)=\"!f.isUploading && removeUploadedFile(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header\">\r\n          <h3 class=\"mu-title\">\r\n            {{ config.label }}\r\n            <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span class=\"mu-badge\" *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description\" *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\" class=\"mu-feature-item\">\r\n              <mat-icon class=\"mu-check\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown\" *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--video\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--device\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] || 'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\" class=\"media-dropdown-item\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span class=\"media-drop-icon media-drop-icon--library\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text\">\r\n                <span class=\"media-drop-label\">{{ controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] || 'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel\" *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div class=\"media-upload-status\" *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section\" *ngIf=\"mediaItems.length\">\r\n          <div class=\"media-carousel-main\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--prev\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer\" *ngFor=\"let item of mediaItems; let i = index\"\r\n              [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\" class=\"carousel-uploading\">\r\n                <div class=\"carousel-spinner\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe\" [src]=\"item.url | trustedUrl\" frameborder=\"0\" allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\" class=\"carousel-remove-btn\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\" class=\"carousel-nav carousel-nav--next\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\" class=\"carousel-dot\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\" class=\"media-thumb\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\" class=\"thumb-uploading\">\r\n                <div class=\"thumb-spinner\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div class=\"mu-right-empty\" *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal\" *ngIf=\"showLibraryModal\" role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header\">\r\n      <div class=\"header-left\">\r\n        <h3 class=\"library-modal-title\">\r\n          {{ controller.labels['LBL_ADD_IMAGES'] || 'Add Images' }}\r\n        </h3>\r\n        <p class=\"library-modal-subtitle\">\r\n          {{ controller.labels['LBL_LIBRARY_MODAL_DESC'] || 'Upload media to make your opportunity stand out. Plus, take full control of your sequence - drag images to reorder as you desire.' }}\r\n        </p>\r\n      </div>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\" class=\"library-close-btn\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error\" *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item\" [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img\" alt=\"Library image\">\r\n        <div class=\"library-check\" *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div class=\"library-empty\" *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"library-modal-footer\">\r\n      <div class=\"library-footer-actions\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_CONTINUE'] || 'Continue' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper\" [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label\">\r\n      {{ config.label }}\r\n      <span class=\"required\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs\">\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel\">\r\n\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\" class=\"loc-venue-item\">\r\n          <mat-icon class=\"loc-venue-search-icon\">search</mat-icon>\r\n          <span class=\"loc-venue-text\">{{ venue.address || venue.name || venue.description }}</span>\r\n          <button type=\"button\" class=\"loc-action-btn loc-delete-btn\" (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text\" *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper\">\r\n          <mat-icon class=\"loc-search-icon\">search</mat-icon>\r\n          <input class=\"field-input loc-search-input\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel\" *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\" class=\"loc-suggestion-item\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\" class=\"loc-add-btn\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container\" *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame\" [style.height]=\"config.locationConfig?.mapHeight || '300px'\"\r\n            [src]=\"getLocationMapEmbedUrl() | trustedUrl\" frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel\">\r\n      <p class=\"loc-section-label\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper\">\r\n        <mat-icon class=\"loc-search-icon\">link</mat-icon>\r\n        <input class=\"field-input loc-search-input\" type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\" class=\"loc-panel loc-tba-panel\">\r\n      <div class=\"loc-tba-content\">\r\n        <mat-icon class=\"loc-tba-icon\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".form-field{margin-bottom:var(--cc-sf-grid-gap, 16px)}.form-field.has-error .field-input{border-color:var(--cc-sf-error-border, #DC2626)}.form-row{display:flex;gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-wrapper{display:flex;flex-direction:column;gap:6px}.field-label{display:block;color:var(--cc-sf-label-color, #202124);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-label-weight, 500);font-size:var(--cc-sf-label-size, 18px);line-height:var(--cc-sf-label-line-height, 100%);letter-spacing:var(--cc-sf-label-letter-spacing, 0%);margin-bottom:.5rem}.field-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.field-input{width:100%;opacity:var(--cc-sf-input-opacity, 1);gap:var(--cc-sf-input-gap, 10px);padding-top:var(--cc-sf-input-padding-y, .625rem);padding-bottom:var(--cc-sf-input-padding-y, .625rem);padding-left:var(--cc-sf-input-padding-x, 16px);padding-right:var(--cc-sf-input-padding-x, 16px);font-size:var(--cc-sf-input-font-size, .875rem);line-height:var(--cc-sf-input-line-height, 1.5);color:var(--cc-sf-input-color, #111827);background-color:var(--cc-sf-input-bg, #ffffff);border:var(--cc-sf-input-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);box-shadow:var(--cc-sf-input-shadow, none);transition:var(--cc-sf-input-transition, all .2s ease);font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.field-input::placeholder{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 16px);line-height:var(--cc-sf-placeholder-line-height, 100%);letter-spacing:var(--cc-sf-placeholder-letter-spacing, 0%);color:var(--cc-sf-input-placeholder, #9CA3AF)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border, #3B82F6);box-shadow:var(--cc-sf-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, .12))}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.field-input.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.field-input.is-invalid:focus{box-shadow:var(--cc-sf-error-focus-shadow, 0 0 0 3px rgba(220, 38, 38, .1))}.field-input.textarea{resize:vertical;min-height:100px;font-family:var(--cc-sf-font-family, inherit)}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.field-hint{font-size:var(--cc-sf-hint-size, .75rem);color:var(--cc-sf-hint-color, #6B7280)}.char-count-hint{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif);font-weight:400;font-style:normal;font-size:14px;line-height:100%;letter-spacing:.02em;text-align:right;color:var(--cc-sf-hint-color, #6B7280);margin-top:4px}.field-error{font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:8px}.radio-group.layout-column,.checkbox-group.layout-column{display:grid!important;grid-template-columns:repeat(12,1fr);gap:16px;width:100%}.radio-group.layout-row,.checkbox-group.layout-row{flex-direction:column!important;gap:12px;width:100%}.radio-group.layout-row .card-item,.checkbox-group.layout-row .card-item{width:100%}.radio-label,.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--cc-sf-label-size, .875rem);color:var(--cc-sf-label-color, #111827)}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #F05A28)}.radio-label.card-item,.checkbox-label.card-item{display:flex!important;flex-direction:row-reverse!important;justify-content:space-between!important;align-items:center!important;border:1px solid #E5E7EB;border-radius:12px;padding:16px 20px;box-sizing:border-box;transition:all .2s ease;background:#fff;margin-bottom:0}.radio-label.card-item input,.checkbox-label.card-item input{margin-left:16px}.radio-label.card-item.selected,.checkbox-label.card-item.selected{border-color:#f05a28;background-color:#f05a280d}.radio-label.card-item .option-content,.checkbox-label.card-item .option-content{display:flex;flex-direction:column;gap:4px;flex:1;text-align:left}.radio-label.card-item .option-content .label-text,.checkbox-label.card-item .option-content .label-text{font-weight:var(--cc-sf-label-weight, 500);font-size:16px;color:#1f2937}.radio-label.card-item .option-content .option-hint,.checkbox-label.card-item .option-content .option-hint{font-size:13px;color:#6b7280}.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip-label{padding:var(--cc-sf-chip-padding, 6px 14px);background:var(--cc-sf-chip-bg, #ffffff);color:var(--cc-sf-chip-color, #374151);border:var(--cc-sf-chip-border, 1px solid #D1D5DB);border-radius:var(--cc-sf-chip-radius, 20px);cursor:pointer;font-size:var(--cc-sf-font-size-base, .875rem);transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-chip-selected-bg, #3B82F6);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-chip-selected-border, #3B82F6)}.switch-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.switch{position:relative;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on, #3B82F6)}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--cc-sf-switch-track-off, #D1D5DB);transition:.4s;border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb, #ffffff);transition:.4s;border-radius:50%}.rating-group{display:flex;gap:4px}.rating-group .star{display:inline-flex;align-items:center;cursor:pointer;transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper{position:relative;display:flex;align-items:center}.password-wrapper .password-input{padding-right:2.75rem;width:100%}.password-wrapper .password-toggle{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.25rem;line-height:1;color:var(--cc-sf-hint-color, #6B7280);display:flex;align-items:center;justify-content:center;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.generated-value{padding:var(--cc-sf-generated-padding, .625rem .875rem);background:var(--cc-sf-generated-bg, #F3F4F6);border:var(--cc-sf-generated-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-generated-radius, 8px);font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-generated-color, #6B7280);font-family:var(--cc-sf-font-family, inherit)}.group-section-wrapper{margin-bottom:var(--cc-sf-section-gap, 20px);border:var(--cc-sf-section-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-radius, 10px);padding:var(--cc-sf-section-padding, 20px);background-color:var(--cc-sf-section-bg, #ffffff);box-shadow:var(--cc-sf-section-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-instance{position:relative;margin-bottom:16px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper .group-instance .group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .group-instance .group-header .group-number{font-weight:500;color:var(--cc-sf-instance-num-color, #4B5563);font-size:var(--cc-sf-instance-num-size, .8125rem)}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .group-label{border:none;padding-bottom:0;margin-bottom:0}.group-section-wrapper.multi-save-active .multi-save-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{background:var(--ms-card-bg, #ffffff);border:1px solid var(--ms-card-border, #E5E7EB);border-radius:var(--ms-card-radius, 10px);box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05));padding:0;margin-bottom:16px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content{flex:1;display:flex;flex-direction:column;gap:4px;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{font-size:1rem;font-weight:600;color:var(--ms-title-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{font-size:.875rem;color:var(--ms-desc-color, #6B7280);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions{display:flex;align-items:center;gap:16px;margin-left:20px}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--cc-sf-instance-divider, #E5E7EB)}.group-section-wrapper.multi-save-active .group-footer .footer-actions{display:flex;gap:12px}.btn-remove{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:var(--cc-sf-error-text-size, .75rem);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px 16px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease);font-family:var(--cc-sf-font-family, inherit)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);background-color:var(--cc-sf-dropzone-bg, #FFFAF1);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;text-align:center;-webkit-user-select:none;user-select:none}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap{margin-bottom:4px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:56px;width:56px;height:56px;line-height:56px;color:var(--cc-sf-dropzone-icon-color, #94A3B8)}.upload-main-text{font-size:.9rem;font-weight:600;color:var(--cc-sf-label-color, #1E293B);margin:0}.upload-main-text .upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-hint-text{font-size:.78rem;color:var(--cc-sf-dropzone-hint-color, #64748B);margin:0}.upload-hint-text .upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.uploaded-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.uploaded-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0}.uploaded-item .file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.uploaded-item .file-info .file-name{font-size:.85rem;font-weight:500;color:var(--cc-sf-label-color, #1E293B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uploaded-item .file-info .file-size{font-size:.72rem;color:var(--cc-sf-hint-color, #94A3B8)}.uploaded-item .file-remove-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:4px;border-radius:4px;flex-shrink:0;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover{color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border:2px solid var(--cc-sf-spinner-track, #E2E8F0);border-top-color:var(--cc-sf-spinner-color, #3B82F6);border-radius:50%;animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.rich-text-editor{display:block;width:100%}.uploading-label{color:var(--cc-sf-spinner-color, #3B82F6)!important;font-style:italic}.input-group{position:relative;display:flex;align-items:stretch;width:100%}.input-group .field-input{flex:1;border-radius:var(--cc-sf-input-radius, 8px)}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);cursor:default;padding-right:3.5rem}.input-group.readonly .input-prefix,.input-group.readonly .input-suffix{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)}.input-prefix,.input-suffix{display:flex;align-items:center;padding:0 .875rem;background-color:var(--cc-sf-input-bg, #FFFFFF);border:var(--cc-sf-input-border, 1.5px solid #D1D5DB);color:var(--cc-sf-hint-color, #6B7280);font-size:var(--cc-sf-input-font-size, .875rem);white-space:nowrap;-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px);color:var(--cc-sf-chip-selected-bg, #3B82F6);font-weight:500}.readonly-icons{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper{margin-bottom:var(--cc-sf-grid-gap, 16px)}.subfields-group-wrapper .group-label{display:block;font-size:var(--cc-sf-label-size, .875rem);font-weight:600;color:var(--cc-sf-label-color, #111827);margin-bottom:.75rem}.subfields-group-wrapper .group-label .required{color:var(--cc-sf-label-required-color, #DC2626);margin-left:.125rem}.subfields-group-wrapper .subfields-row{display:flex;align-items:flex-end;gap:12px;border-radius:var(--cc-sf-input-radius, 8px);transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{flex:1;min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{margin-bottom:24px;font-weight:700;color:#94a3b8}.subfields-group-wrapper .subfields-group-error{display:block;margin-top:6px;font-size:var(--cc-sf-error-text-size, .75rem);color:var(--cc-sf-error-text-color, #DC2626)}.autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}.autocomplete-wrapper .ac-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-input{flex:1;padding-left:2.4rem;padding-right:2.4rem}.autocomplete-wrapper .ac-clear-btn{position:absolute;right:.6rem;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:.2rem;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-input-focus-border, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border, #E5E7EB)}.ac-no-results{font-style:italic;font-size:.8125rem;color:var(--cc-sf-hint-color, #6B7280)}.media-upload-wrapper{padding:0;border:none;background:none}.mu-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:flex-start}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-left{display:flex;flex-direction:column;gap:20px}.mu-header{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px}.mu-title{margin:0;font-size:1.35rem;font-weight:700;color:var(--cc-sf-label-color, #111827);line-height:1.3}.mu-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;background:var(--cc-sf-label-color, #111827);color:#fff;font-size:.72rem;font-weight:600;white-space:nowrap;flex-shrink:0}.mu-description{margin:0;font-size:.875rem;color:var(--cc-sf-hint-color, #6B7280);line-height:1.6}.mu-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.mu-feature-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--cc-sf-hint-color, #374151)}.mu-feature-item .mu-check{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--cc-sf-chip-selected-bg, #3B82F6);flex-shrink:0}.mu-right{display:flex;flex-direction:column;gap:12px;min-height:260px}.mu-right-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:250px;max-width:400px;border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1);border-radius:var(--mu-carousel-radius, 12px);background:var(--cc-sf-dropzone-bg, #FFFAF1);text-align:center;color:var(--cc-sf-hint-color, #94A3B8);padding:24px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{font-size:52px;width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{position:relative;display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{font-size:18px;width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:200;min-width:240px;background:var(--mu-dropdown-bg, #ffffff);border:var(--mu-dropdown-border, 1px solid #E5E7EB);border-radius:12px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));overflow:hidden;animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:none;border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6);cursor:pointer;text-align:left;transition:background .15s ease;font-family:var(--cc-sf-font-family, inherit)}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{display:flex;flex-direction:column;gap:2px;flex:1}.media-drop-label{font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.media-drop-desc{font-size:.75rem;color:var(--cc-sf-hint-color, #6B7280)}.youtube-input-panel{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--cc-sf-dropzone-bg, #FFFAF1);border:1px solid var(--cc-sf-input-border, #E5E7EB);border-radius:10px;animation:mu-fade-in .18s ease}.youtube-panel-label{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--cc-sf-label-color, #111827)}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{display:flex;gap:8px;align-items:stretch}.youtube-input-row .youtube-url-input{flex:1}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-top:4px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);border-radius:8px;font-size:.85rem;font-weight:500;animation:mu-fade-in .2s ease}.media-upload-status .status-icon{font-size:18px;width:18px;height:18px;line-height:18px}.media-carousel-section{display:flex;flex-direction:column;gap:12px}.media-carousel-main{position:relative;width:100%;max-width:400px;height:var(--mu-carousel-height, 250px);background:var(--mu-carousel-bg, #0F172A);border-radius:var(--mu-carousel-radius, 12px);overflow:hidden;display:flex;align-items:center;justify-content:center}.carousel-viewer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.carousel-viewer .carousel-image{width:100%;height:100%;object-fit:cover;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-iframe{width:100%;height:100%;border-radius:var(--mu-carousel-radius, 12px)}.carousel-viewer .carousel-uploading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#94a3b8;font-size:.85rem}.carousel-viewer .carousel-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:#ffffffd9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{position:absolute;top:10px;right:10px;z-index:10;width:32px;height:32px;border-radius:50%;background:#0000008c;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:10}.carousel-dot{width:8px;height:8px;border-radius:50%;background:#ffffff73;cursor:pointer;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{display:flex;flex-wrap:wrap;max-width:400px;gap:8px;overflow-x:auto;padding-bottom:4px}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--mu-thumb-bg, #E2E8F0);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, #3B82F6);transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{width:100%;height:100%;object-fit:cover}.media-thumb .thumb-yt-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#1e293b;color:#ef4444}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border:2px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;background:var(--mu-modal-bg, #ffffff);border-radius:var(--mu-modal-radius, 16px);box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));display:flex;flex-direction:column;overflow:hidden;animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 28px;border-bottom:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);flex-shrink:0}.library-modal-header .header-left{display:flex;flex-direction:column;gap:8px}.library-modal-title{margin:0;font-size:1.25rem;font-weight:700;color:#111827}.library-modal-subtitle{margin:0;font-size:.85rem;color:#6b7280;line-height:1.5;max-width:600px}.library-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:50%;color:var(--cc-sf-hint-color, #9CA3AF);transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading,.library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--cc-sf-hint-color, #9CA3AF);font-size:.875rem;flex:1}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border:3px solid #E2E8F0;border-top-color:#3b82f6;border-radius:50%;animation:cc-spin .7s linear infinite}.library-error{display:flex;align-items:center;gap:8px;padding:16px 24px;background:var(--cc-sf-error-bg, #FEF2F2);color:var(--cc-sf-error-text-color, #DC2626);font-size:.875rem;flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:28px;overflow-y:auto;flex:1;background:#f9fafb}.library-grid::-webkit-scrollbar{width:8px}.library-grid::-webkit-scrollbar-track{background:#f1f1f1}.library-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px;border:2px solid #F1F1F1}.library-grid-item{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;cursor:pointer;border:3px solid transparent;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.library-grid-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.library-grid-item.selected{border-color:#3b82f6}.library-grid-item.selected .library-grid-img{opacity:.7}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{width:100%;height:100%;object-fit:cover;display:block}.library-overlay-hover{position:absolute;inset:0;background:#3b82f61f;opacity:0;transition:opacity .15s ease}.library-check{position:absolute;top:6px;right:6px;color:var(--cc-sf-chip-selected-bg, #3B82F6);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{display:flex;align-items:center;justify-content:flex-end;padding:20px 28px;background:#fff;border-top:1px solid #E5E7EB;flex-shrink:0}.library-modal-footer .library-footer-actions{display:flex;gap:12px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary{background-color:#3b82f6!important;border-color:#3b82f6!important;color:#fff!important;font-weight:600;padding-left:32px;padding-right:32px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:hover{background-color:#2563eb!important}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:disabled{background-color:#93c5fd!important;cursor:not-allowed}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline{font-weight:600;padding-left:24px;padding-right:24px;border-color:#d1d5db;color:#374151}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline:hover{background-color:#f9fafb}.library-selected-count{font-size:.875rem;font-weight:600;color:var(--cc-sf-hint-color, #6B7280)}.library-footer-actions{display:flex;gap:10px}.location-field-wrapper{gap:12px}.location-subtitle{margin:0;font-size:var(--cc-sf-hint-size, .8125rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.5}.location-tabs{display:flex;gap:12px;margin-bottom:24px}.loc-tab-btn{flex:1}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:#fff!important;color:#000!important;border:1px solid #E5E7EB}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:#f3f4f6!important}.loc-panel{display:flex;flex-direction:column;gap:12px}.loc-section-label{margin:0;font-size:var(--cc-sf-label-size, .9rem);font-weight:600;color:var(--cc-sf-label-color, #111827)}.loc-venue-list{display:flex;flex-direction:column;gap:8px}.loc-venue-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--loc-venue-item-bg, #ffffff);border:1px solid var(--loc-venue-item-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 7px);transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--cc-sf-hint-color, #9CA3AF);flex-shrink:0}.loc-venue-text{flex:1;font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-input-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-action-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-count-text{margin:0;font-size:.8125rem;font-weight:600;color:var(--cc-sf-input-focus-border, #3B82F6)}.loc-search-container{position:relative}.loc-search-wrapper{position:relative;display:flex;align-items:center}.loc-search-icon{position:absolute;left:.75rem;font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem;color:var(--cc-sf-hint-color, #9CA3AF);pointer-events:none;z-index:1}.loc-search-input{flex:1;padding-left:2.4rem!important}.loc-suggestions-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:300;background:var(--loc-suggestion-bg, #ffffff);border:1px solid var(--cc-sf-input-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 8px);box-shadow:0 8px 24px #0000001a;overflow:hidden;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .12s ease;font-family:var(--cc-sf-font-family, inherit)}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--loc-delete-color, #E53E3E);flex-shrink:0}.loc-suggestion-text{font-size:var(--cc-sf-input-font-size, .875rem);color:var(--cc-sf-label-color, #374151);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.loc-add-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--loc-add-color, #1A56DB);font-family:var(--cc-sf-font-family, inherit);font-size:var(--cc-sf-input-font-size, .875rem);font-weight:600;padding:0;transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{border-radius:var(--loc-map-radius, 10px);overflow:hidden;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);box-shadow:0 2px 10px #0000000f}.loc-map-frame{width:100%;display:block;border:none}.loc-map-hint{margin:0;font-size:.78rem;color:var(--cc-sf-hint-color, #6B7280);text-align:center}.loc-tba-panel{min-height:120px;justify-content:center}.loc-tba-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 24px;background:var(--loc-tba-bg, #F9FAFB);border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:var(--cc-sf-input-radius, 10px)}.loc-tba-icon{font-size:40px;width:40px;height:40px;line-height:40px;color:var(--loc-tba-icon-color, #9CA3AF);opacity:.6}.loc-tba-text{margin:0;font-size:var(--cc-sf-input-font-size, .9rem);color:var(--cc-sf-hint-color, #6B7280);line-height:1.6;max-width:360px}.loc-online-panel .loc-search-wrapper{margin-top:4px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ExpressionService }, { type: i3.HttpClient }], propDecorators: { config: [{
                 type: Input
             }], controller: [{
@@ -5454,11 +5463,11 @@ class FormSectionComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormSectionComponent, isStandalone: false, selector: "lib-form-section", inputs: { config: "config", controller: "controller", formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"form-section-container\">\r\n  <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n  <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"config.allowMulti\">\r\n    <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n    <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n      <!-- Instance header (remove button) -->\r\n      <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n        <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n          <mat-icon>delete_outline</mat-icon> Remove\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n      <div class=\"section-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n      <mat-icon>add</mat-icon> Add {{ config.label }}\r\n    </lib-button>\r\n  </ng-container>\r\n\r\n  <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"!config.allowMulti\">\r\n    <div class=\"section-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormSectionComponent, isStandalone: false, selector: "lib-form-section", inputs: { config: "config", controller: "controller", formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"form-section-container\">\r\n  <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n  <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"config.allowMulti\">\r\n    <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n    <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n      <!-- Instance header (remove button) -->\r\n      <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n        <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n          <mat-icon>delete_outline</mat-icon> Remove\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n      <div class=\"section-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n      <mat-icon>add</mat-icon> Add {{ config.label }}\r\n    </lib-button>\r\n  </ng-container>\r\n\r\n  <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"!config.allowMulti\">\r\n    <div class=\"section-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\r\n  <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n  <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"config.allowMulti\">\r\n    <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n    <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n      <!-- Instance header (remove button) -->\r\n      <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n        <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n          <mat-icon>delete_outline</mat-icon> Remove\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n      <div class=\"section-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n      <mat-icon>add</mat-icon> Add {{ config.label }}\r\n    </lib-button>\r\n  </ng-container>\r\n\r\n  <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"!config.allowMulti\">\r\n    <div class=\"section-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"] }]
+            args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\r\n  <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n  <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"config.allowMulti\">\r\n    <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n    <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n      <!-- Instance header (remove button) -->\r\n      <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n        <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n        <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n          <mat-icon>delete_outline</mat-icon> Remove\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n      <div class=\"section-fields sf-grid\">\r\n        <ng-container *ngFor=\"let field of config.children\">\r\n          <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n            <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n            </lib-form-field>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n      <mat-icon>add</mat-icon> Add {{ config.label }}\r\n    </lib-button>\r\n  </ng-container>\r\n\r\n  <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <ng-container *ngIf=\"!config.allowMulti\">\r\n    <div class=\"section-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
                 type: Input
             }], controller: [{
@@ -5567,8 +5576,8 @@ class SmartFormComponent {
             this.controller.actionLabels = this.formSchema.labels;
             this.isStepper = this.formSchema.formType === 'STEPPER';
             this.fieldList = this.isStepper
-                ? this.formSchema.stepperConfig?.children || []
-                : this.formSchema.sectionConfig?.children || [];
+                ? (this.formSchema.stepperConfig?.children || []).filter(step => step.isEnabled !== false && step.sectionConfig?.isEnabled !== false)
+                : (this.formSchema.sectionConfig?.children || []).filter(field => field.isEnabled !== false);
             this.initializeForm();
         }
         catch (e) {
@@ -5581,6 +5590,8 @@ class SmartFormComponent {
     }
     collectFields(fields) {
         fields.forEach(field => {
+            if (field.isEnabled === false || field.sectionConfig?.isEnabled === false)
+                return;
             // Flat leaf fields: seed controller with default values
             if (field.name && field.type !== 'GROUP' && field.type !== 'ROW') {
                 // Check if initialValues already has a value for this field
@@ -5594,7 +5605,10 @@ class SmartFormComponent {
             if (field.type === 'ROW' && field.children?.length) {
                 this.collectFields(field.children);
             }
-            // GROUP children will be handled dynamically by FormFieldComponent
+            // Recurse into GROUP children
+            if (field.type === 'GROUP' && field.sectionConfig?.children?.length) {
+                this.collectFields(field.sectionConfig.children);
+            }
         });
     }
     // ───────────────────────────────────────────────────────────────────────────
@@ -5728,6 +5742,8 @@ class SmartFormComponent {
         const processedKeys = new Set();
         const processFields = (fieldList) => {
             fieldList.forEach(field => {
+                if (field.isEnabled === false || field.sectionConfig?.isEnabled === false)
+                    return;
                 if (field.type === 'ROW' && field.children) {
                     processFields(field.children);
                 }
@@ -6008,11 +6024,11 @@ class SmartFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: SmartFormController }, { token: ExpressionService }, { token: i3.HttpClient }, { token: SnackbarService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartFormComponent, isStandalone: false, selector: "lib-smart-form", inputs: { formJson: "formJson", initialValues: "initialValues", enableDraftAutoSave: "enableDraftAutoSave", labels: "labels", mode: "mode" }, outputs: { submit: "submit", draftSave: "draftSave", actionClick: "actionClick" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller", "formGroup"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartFormComponent, isStandalone: false, selector: "lib-smart-form", inputs: { formJson: "formJson", initialValues: "initialValues", enableDraftAutoSave: "enableDraftAutoSave", labels: "labels", mode: "mode" }, outputs: { submit: "submit", draftSave: "draftSave", actionClick: "actionClick" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller", "formGroup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"] }]
+            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SmartFormController }, { type: ExpressionService }, { type: i3.HttpClient }, { type: SnackbarService }, { type: i1$1.Router }], propDecorators: { formJson: [{
                 type: Input
             }], initialValues: [{