@idsoftsource/initial-process 3.5.8 → 3.6.1

package/fesm2022/idsoftsource-initial-process.mjs

@@ -849,7 +849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     args: ['API_BASE_URL']
                 }] }] });
 
-let ProvidersService$1 = class ProvidersService {
+class ProvidersService {
     http;
     baseUrl = `Provider`;
     constructor(http) {
@@ -885,8 +885,8 @@ let ProvidersService$1 = class ProvidersService {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProvidersService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProvidersService, providedIn: 'root' });
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProvidersService$1, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProvidersService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2771,13 +2771,13 @@ class UserToolService {
           CREATE USER TOOL
     ============================== */
     createUserTool(model) {
-        return this.httpClient.post(`${this.baseUrl}/CreateUserTool`, model);
+        return this.httpClient.post(`${this.baseUrl}/CreateNewUserTool`, model);
     }
     /* ==============================
           UPDATE USER TOOL
     ============================== */
     updateUserTool(model) {
-        return this.httpClient.put(`${this.baseUrl}/UpdateUserTool`, model);
+        return this.httpClient.put(`${this.baseUrl}/UpdateNewUserTool`, model);
     }
     /* ==============================
           BULK DELETE USER TOOL
@@ -2789,7 +2789,7 @@ class UserToolService {
           GET USER TOOL (GRID)
     ============================== */
     getUserTool(query) {
-        return this.httpClient.get(`${this.baseUrl}/GetUserTool`, {
+        return this.httpClient.get(`${this.baseUrl}/GetNewUserTool`, {
             params: this.buildParams(query),
         });
     }
@@ -2919,7 +2919,7 @@ class UserDocumentService {
         return this.httpClient.put(`${this.baseUrl}/UpdateNewUserDocument`, model);
     }
     getUserDocument(query) {
-        return this.httpClient.get(`${this.baseUrl}/GetUserDocument`, {
+        return this.httpClient.get(`${this.baseUrl}/GetNewUserDocument`, {
             params: this.buildParams(query)
         });
     }
@@ -3080,45 +3080,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
-class ProvidersService {
-    http;
-    baseUrl = `ProviderUserMapping`;
-    constructor(http) {
-        this.http = http;
-    }
-    generateParams(query) {
-        let params = new HttpParams();
-        if (!query)
-            return params;
-        Object.keys(query).forEach(key => {
-            if (query[key] !== null && query[key] !== undefined) {
-                params = params.set(key, query[key]);
-            }
-        });
-        return params;
-    }
-    getProviderUserMapping(query) {
-        return this.http.get(`${this.baseUrl}/GetProviderUserMapping`, { params: this.generateParams(query) });
-    }
-    changeStatus(model) {
-        return this.http.post(`${this.baseUrl}/ChangeProviderStatus`, model);
-    }
-    createProviderUserMapping(model) {
-        return this.http.post(this.baseUrl, model);
-    }
-    updateProviderUserMapping(model) {
-        return this.http.put(this.baseUrl, model);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProvidersService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProvidersService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProvidersService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
-
 class FrontEndProvidersService {
     http;
     baseUrl = `FrontEndUser`;
@@ -3140,6 +3101,9 @@ class FrontEndProvidersService {
     getProviderDetails(id) {
         return this.http.get(`${this.baseUrl}/GetProviderById?targetProviderId=${id}`);
     }
+    getProviderUserMapping(query) {
+        return this.http.get(`${this.baseUrl}/GetProviderUserMapping`, { params: this.generateParams(query) });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrontEndProvidersService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrontEndProvidersService, providedIn: 'root' });
 }
@@ -3164,7 +3128,6 @@ class PreviewComponent {
     tokenService;
     roleContextService;
     providerService;
-    providerUserMappingService;
     frontendProviderService;
     cdr;
     libConfig;
@@ -3295,7 +3258,7 @@ class PreviewComponent {
         { name: 'Insurance Agency', value: 'InsuranceAgency', img: 'assets/images/users/insurance.svg', selected: false, code: ProviderType.InsuranceAgency, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
         { name: 'Real Estate Company', value: 'RealEstateCompany', img: 'assets/images/users/realestate.svg', selected: false, code: ProviderType.RealEstateAgency, id: '00000000-0000-0000-0000-000000000000', roleId: '00000000-0000-0000-0000-000000000000' },
     ];
-    constructor(store, fileService, userSkillSetService, userToolService, professionService, userProfessionService, userDocumentService, userEducation, userDetailService, userExperienceService, tokenService, roleContextService, providerService, providerUserMappingService, frontendProviderService, cdr, libConfig) {
+    constructor(store, fileService, userSkillSetService, userToolService, professionService, userProfessionService, userDocumentService, userEducation, userDetailService, userExperienceService, tokenService, roleContextService, providerService, frontendProviderService, cdr, libConfig) {
         this.store = store;
         this.fileService = fileService;
         this.userSkillSetService = userSkillSetService;
@@ -3309,7 +3272,6 @@ class PreviewComponent {
         this.tokenService = tokenService;
         this.roleContextService = roleContextService;
         this.providerService = providerService;
-        this.providerUserMappingService = providerUserMappingService;
         this.frontendProviderService = frontendProviderService;
         this.cdr = cdr;
         this.libConfig = libConfig;
@@ -3344,13 +3306,21 @@ class PreviewComponent {
         await this.loadSavedSectionsFromApis();
         if (this.roleData?.role?.name === 'Provider') {
             const providerOwner = sessionStorage.getItem('ip_provider_owner');
-            if (sessionStorage.getItem('providerId') && (!providerOwner || providerOwner !== this.payloadUserId)) {
+            if (!providerOwner || providerOwner !== this.payloadUserId) {
                 sessionStorage.removeItem('providerId');
                 sessionStorage.removeItem('providerUserMappingId');
                 sessionStorage.removeItem('ip_provider_owner');
+                // Don't trust any companyDetails still sitting on the in-memory profile
+                // signal either — CredentialingStore is a root singleton, so it can be
+                // carrying over another user's company data from earlier in this same
+                // browser session (e.g. a previous signup that never hit a full reload).
+                const current = this.store.profileSignal();
+                if (current?.companyDetails) {
+                    this.commitProfile({ ...current, companyDetails: undefined });
+                }
             }
             if (!sessionStorage.getItem('providerId')) {
-                await this.restoreProviderMappingFromServer();
+                await this.restoreProviderId();
             }
             const storedCompanyDetails = this.store.profileSignal()?.companyDetails;
             if (storedCompanyDetails) {
@@ -7470,36 +7440,89 @@ class PreviewComponent {
             logoUrl: this.logo.logoUrl
         };
     }
-    // Restores providerId/providerUserMappingId into sessionStorage when they're missing
-    // (e.g. session storage was cleared) but this user already has a provider mapping on
-    // the backend. Prevents saveProvider() from mistakenly creating a duplicate provider.
+    // Keyed by payloadUserId — the same stable identifier already used for
+    // ip_provider_owner and every other targetUserId call in this component.
+    providerCacheKey() {
+        const normalized = (this.payloadUserId || '').toString().trim();
+        return normalized ? `ip_provider_cache::${normalized}` : null;
+    }
+    // Authoritative, cross-device source of truth: ask the backend whether this user
+    // already has a provider mapping. Correct endpoint is FrontEndUser/GetProviderUserMapping
+    // (NOT the ProviderUserMapping controller, which always returns an empty result for
+    // this lookup). Falls back to the local per-device cache if the call fails or the
+    // user genuinely has no mapping there either.
     async restoreProviderMappingFromServer() {
-        if (!this.payloadUserId || sessionStorage.getItem('providerId'))
-            return;
+        if (!this.payloadUserId)
+            return false;
         try {
-            const res = await firstValueFrom(this.providerUserMappingService.getProviderUserMapping({
-                page: 1,
-                pageSize: 1,
-                targetUserId: this.payloadUserId,
-                orderBy: 'createdDateTime desc',
+            const res = await firstValueFrom(this.frontendProviderService.getProviderUserMapping({
+                TargetUserId: this.payloadUserId,
+                Page: 1,
+                PageSize: 1,
             }));
             const mapping = res?.data?.[0];
-            const providerId = mapping?.providerId ?? mapping?.provider?.id ?? null;
-            const providerUserMappingId = mapping?.id ?? mapping?.providerUserMappingId ?? null;
+            const providerId = mapping?.providerId ?? null;
             if (providerId) {
                 sessionStorage.setItem('providerId', providerId);
-                if (providerUserMappingId)
-                    sessionStorage.setItem('providerUserMappingId', providerUserMappingId);
+                sessionStorage.setItem('ip_provider_owner', this.payloadUserId);
+                this.cacheProviderIdLocally(providerId);
+                return true;
+            }
+        }
+        catch (err) {
+            console.error('Unable to look up existing provider mapping from server', err);
+        }
+        return false;
+    }
+    // Combines the two sources: try the backend first (works across any device/browser),
+    // then fall back to the local per-device cache if that fails or comes back empty.
+    async restoreProviderId() {
+        const restoredFromServer = await this.restoreProviderMappingFromServer();
+        if (!restoredFromServer) {
+            this.restoreProviderIdFromLocalCache();
+        }
+    }
+    // Restores providerId/providerUserMappingId into sessionStorage from the local,
+    // per-user cache when they're missing (e.g. sessionStorage was cleared, or the
+    // server lookup didn't find anything) but this user already created a provider
+    // earlier on this same device. Prevents saveProvider() from mistakenly creating a
+    // duplicate provider for a returning user.
+    restoreProviderIdFromLocalCache() {
+        const key = this.providerCacheKey();
+        if (!key)
+            return;
+        try {
+            const raw = localStorage.getItem(key);
+            if (!raw)
+                return;
+            const cached = JSON.parse(raw);
+            if (cached?.providerId) {
+                sessionStorage.setItem('providerId', cached.providerId);
+                if (cached.providerUserMappingId)
+                    sessionStorage.setItem('providerUserMappingId', cached.providerUserMappingId);
                 sessionStorage.setItem('ip_provider_owner', this.payloadUserId);
             }
         }
         catch (err) {
-            console.error('Unable to restore existing provider mapping', err);
+            console.error('Unable to restore provider id from local cache', err);
+        }
+    }
+    // Persists the current provider id/mapping so a future session on this device
+    // (even after sessionStorage is cleared) can find it again instead of recreating it.
+    cacheProviderIdLocally(providerId, providerUserMappingId) {
+        const key = this.providerCacheKey();
+        if (!key || !providerId)
+            return;
+        try {
+            localStorage.setItem(key, JSON.stringify({ providerId, providerUserMappingId: providerUserMappingId ?? null }));
+        }
+        catch (err) {
+            console.error('Unable to cache provider id locally', err);
         }
     }
     async saveProvider() {
         if (!sessionStorage.getItem('providerId')) {
-            await this.restoreProviderMappingFromServer();
+            await this.restoreProviderId();
         }
         const existingProviderId = sessionStorage.getItem('providerId');
         this.provider = this.bindProviderDetails();
@@ -7511,6 +7534,7 @@ class PreviewComponent {
                     .updateInitialSetUpProvider(updatePayload)
                     .subscribe((data) => {
                     if (!data.failed) {
+                        this.cacheProviderIdLocally(existingProviderId, providerUserMappingId);
                         this.companyDetailsSaved = true;
                         this.companyNameError = null;
                         resolve();
@@ -7533,6 +7557,7 @@ class PreviewComponent {
                     sessionStorage.setItem('providerId', data?.value[0]);
                     sessionStorage.setItem('providerUserMappingId', data?.value[1]);
                     sessionStorage.setItem('ip_provider_owner', this.payloadUserId);
+                    this.cacheProviderIdLocally(data?.value[0], data?.value[1]);
                     this.companyDetailsSaved = true;
                     this.companyNameError = null;
                     resolve();
@@ -7683,8 +7708,8 @@ class PreviewComponent {
             event.preventDefault();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, deps: [{ token: CredentialingStore }, { token: FileService }, { token: UserSkillSetService }, { token: UserToolService }, { token: ProfessionService }, { token: UserProfessionService }, { token: UserDocumentService }, { token: UserEducationService }, { token: UserDetailService }, { token: UserExperienceService }, { token: i1$3.TokenService }, { token: i1$3.RoleContextService }, { token: ProvidersService$1 }, { token: ProvidersService }, { token: FrontEndProvidersService }, { token: i0.ChangeDetectorRef }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: true, selector: "app-preview", inputs: { providerId: "providerId", isResume: "isResume", resumeModel: "resumeModel", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", signatureFileId: "signatureFileId", signatureUrl: "signatureUrl" }, outputs: { backToParent: "backToParent" }, viewQueries: [{ propertyName: "companyForm", first: true, predicate: ["companyForm"], descendants: true }], ngImport: i0, template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4 pt-0'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData && !isResume\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3 section-header-title\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Personal & Company Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">First name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n            <input type=\"email\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" [options]=\"options\"\r\n              inputClass=\"form-control form-control-sm\" [invalid]=\"!tempProfile?.address?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">Home address is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n            <input type=\"number\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <div class=\"position-relative\">\r\n              <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); setupHeadshotFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\"\r\n              [options]=\"options\" inputClass=\"form-control form-control-sm\"\r\n              [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #setupCompanyLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); setupCompanyLogoInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer  d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 \"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\"headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n                <span class=\"badge border section-flag\"\r\n                  [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                  {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\r\n          </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer  d-flex align-items-center justify-content-between\">\r\n          <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm update-profile-card\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n                placeholder=\"First Name\" required #fName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n                placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n                required email #email=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\(\\d{3}\\) \\d{3}-\\d{4}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n                placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n                title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input type=\"number\" class=\"form-control\" [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0)}\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"1\"\r\n                #yearsOfExperience=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"address\" [options]=\"options\"\r\n                placeholder=\"Home Address\" required #address=\"ngModel\"\r\n                [invalid]=\"address.invalid && (address.dirty || address.touched)\"\r\n                [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n                (addressResolved)=\"onUserAddressResolved($event)\"\r\n                (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n                address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n                required #city=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n                required #state=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n                required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n                (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n                required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n                is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n                Zip code must be up to 6 digits\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n                placeholder=\"Country\" required #country=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n                is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #updateProfileHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"updateProfileHeadshotFile\" />\r\n              <div class=\"position-relative\">\r\n                <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                       placeholder=\"Upload Profile Picture\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                  <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n                </div>\r\n              </div>\r\n              <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\" *ngIf=\"headshotPreviewUrl\">Preview</label>\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"headshotPreviewUrl\">\r\n                <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); updateProfileHeadshotFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic || !isBasicFormValid\" (click)=\"save()\">\r\n            <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData && !isResume\">\r\n    <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-0\">\r\n        <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!companyLogoUrl()\">\r\n                <img src=\"/assets/images/icons/building.svg\" width=\"24\" height=\"24\" alt=\"\" style=\"filter: brightness(0) invert(1);\" />\r\n              </div>\r\n              <img *ngIf=\"companyLogoUrl()\" [src]=\"companyLogoUrl()\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;background:#fff;\" alt=\"Company Logo\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ companyDetails()?.companyName }}</h2>\r\n                  <span class=\"badge border section-flag\"\r\n                    [ngClass]=\"companyDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                    {{ companyDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                  </span>\r\n                </div>\r\n                <p class=\"text-muted\">{{ companyDetails()?.companyPhoneNumber }}</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.companyPhoneNumber }}</span>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Address</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.address1 }}, {{ companyDetails()?.city }}, {{ companyDetails()?.state }}, {{ companyDetails()?.zipcode }}, {{ companyDetails()?.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-footer d-flex align-items-center justify-content-between\">\r\n        <span *ngIf=\"!companyDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n          <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your company info.\r\n        </span>\r\n        <span *ngIf=\"companyDetailsSaved\" class=\"small text-success fw-semibold\">\r\n          <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Company details saved.\r\n        </span>\r\n        <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"card shadow-sm\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{ 'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n              Company phone must be 10 digits\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" [options]=\"options\"\r\n              required [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); uploadCompanyFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n        <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Profession</h5>\r\n        <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          {{ selectedProfessionCount }} selected\r\n        </span>\r\n      </div>\r\n      <button type=\"button\" class=\"btn btn-sm btn-primary px-4\"\r\n        [disabled]=\"selectedProfessionCount === 0 || isSavingProfessionsTable\"\r\n        (click)=\"submitProfessions()\">\r\n        <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingProfessionsTable ? 'Saving...' : professionSubmitLabel }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"mb-3\">\r\n      <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n        [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n        (keydown.enter)=\"createManualProfessionRow()\" />\r\n    </div>\r\n\r\n    <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n      <div class=\"profession-acc-columns\">\r\n        <span></span>\r\n        <span>Profession Name</span>\r\n        <span>Group</span>\r\n        <span>Type</span>\r\n        <span></span>\r\n      </div>\r\n\r\n      <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n        <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n          <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n            <div class=\"text-center profession-acc-checkbox\" (click)=\"$event.stopPropagation()\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                (change)=\"onProfessionRowCheck(p, $event)\" />\r\n            </div>\r\n            <div class=\"profession-acc-name\">\r\n              {{ p.professionName }}\r\n              <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n            </div>\r\n            <div class=\"profession-acc-group\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                  (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                  placeholder=\"Select group\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n            </div>\r\n            <div class=\"profession-acc-type\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                  (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                  placeholder=\"Select type\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n            </div>\r\n            <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n              (click)=\"toggleProfessionRow(p)\"\r\n              [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n              <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"6 9 12 15 18 9\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-panel\">\r\n              <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3 text-end\">\r\n                Select a Group and Type above to enable saving this profession.\r\n              </div>\r\n              <div class=\"profession-acc-fields\">\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                  <div class=\"profession-acc-stars\">\r\n                    <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                      (click)=\"setProfessionRowStars(p, s)\"\r\n                      [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                      [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                      [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                    <span class=\"small text-muted\">Yrs</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                  <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                    [name]=\"'profVis-' + p.id\" />\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                  <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                  <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                    [name]=\"'profNotes-' + p.id\" placeholder=\"Add details here\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n        <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n        <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n          Add \"{{ professionSearchQry?.trim() }}\"\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n        class=\"text-center text-muted small py-3\">\r\n        No professions found.\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || !workSectionHasUnsavedItems() || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\" role=\"button\"\r\n      (click)=\"addJob()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush  rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel mb-2\">\r\n        <form class=\"row g-2 work-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n          </div>\r\n          <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n            <div class=\"form-check d-flex align-items-center\">\r\n              <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n              <label class=\"form-check-label ps-2 mb-0\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              name=\"newEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n              required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n            <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newWorkAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeJobFile(); newWorkAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n                formatMonthYear(job.endDate) }}</span>\r\n              <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n              title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n              [disabled]=\"deletingJobIndex() === i\" title=\"Delete\">\r\n              <span *ngIf=\"deletingJobIndex() === i\" class=\"spinner-border spinner-border-sm\"></span>\r\n              <img *ngIf=\"deletingJobIndex() !== i\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <div class=\"mt-3  p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"tempJobIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ tempJobIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2 work-editor-row\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n                <div class=\"form-check d-flex align-items-center\">\r\n                  <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n                  <label class=\"form-check-label ps-2 mb-0\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n                  name=\"endDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\"\r\n                  *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n                <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Certification File</label>\r\n                <input #workAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n                <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"removeJobFile(); workAttachmentInput.value=''\" title=\"Remove file\">\r\n                    <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4 \" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || !certificationSectionHasUnsavedItems() || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addCertification()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 certification-editor-row\">\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Profession Type</label>\r\n            <div class=\"d-flex align-items-start gap-2\">\r\n              <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                name=\"newCertProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n              </ng-select>\r\n              <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certification Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newCertAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeCertificationFile(); newCertAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\"\r\n            [disabled]=\"isSavingCertification\"\r\n            (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n                (click)=\"deleteCertification(ci)\" [disabled]=\"deletingCertificationIndex() === ci\" title=\"Delete\">\r\n                <span *ngIf=\"deletingCertificationIndex() === ci\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingCertificationIndex() !== ci\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"tempCertificationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempCertificationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 certification-editor-row\">\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Profession Type</label>\r\n              <div class=\"d-flex align-items-start gap-2\">\r\n                <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                  [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                  name=\"certProfessionType{{ ci }}\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                </ng-select>\r\n                <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                  (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certification Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Certification File</label>\r\n              <input #certAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeCertificationFile(); certAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n              (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || !licenseSectionHasUnsavedItems() || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addLicense()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 license-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">License File</label>\r\n            <input #newLicenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeLicenseFile(); newLicenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n            (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n                [disabled]=\"deletingLicenseIndex() === li\" title=\"Delete\">\r\n                <span *ngIf=\"deletingLicenseIndex() === li\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingLicenseIndex() !== li\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"tempLicenseIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempLicenseIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 license-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">License File</label>\r\n              <input #licenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeLicenseFile(); licenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n              (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || !toolsSectionHasUnsavedItems() || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\"\r\n          class=\"btn btn-light border res-flex  d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n          <span class=\"fw-normal item-name-text\">{{ tool }}</span>\r\n          <span class=\"badge border ms-1\"\r\n            [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n          <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n            class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n            Missing info\r\n          </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\"\r\n          [disabled]=\"deletingToolIndex() === ti\">\r\n          <span *ngIf=\"deletingToolIndex() === ti\" class=\"spinner-border spinner-border-sm\"></span>\r\n          <span *ngIf=\"deletingToolIndex() !== ti\" class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeToolEditor()\">\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n            </div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolShowFieldErrors && toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Profession Type</label>\r\n                <div class=\"d-flex align-items-start gap-2\">\r\n                  <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                    [ngModel]=\"toolForm()?.professionId\" (change)=\"onToolProfessionChange($event)\"\r\n                    name=\"toolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                  </ng-select>\r\n                  <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                    (click)=\"openCustomProfessionForm('tool')\">+</button>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolShowFieldErrors && isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"rating-count text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? 0 : +$event })\" name=\"toolYear\" min=\"0\"\r\n                  max=\"30\" placeholder=\"Years of Experience\" />\r\n              </div>\r\n\r\n              <div class=\"col-md-4 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                  (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\" />\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n                  placeholder=\"Enter additional details (optional)\"></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\"\r\n              [disabled]=\"deletingToolIndex() === editingToolIndex()\">\r\n              <span *ngIf=\"deletingToolIndex() === editingToolIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n              <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || !skillsSectionHasUnsavedItems() || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\"\r\n            class=\"btn btn-light border  res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n            <span class=\"fw-normal item-name-text\">{{ skill }}</span>\r\n            <span class=\"badge border ms-1\"\r\n              [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\" [disabled]=\"deletingSkillIndex() === si\">\r\n            <span *ngIf=\"deletingSkillIndex() === si\" class=\"spinner-border spinner-border-sm\"></span>\r\n            <span *ngIf=\"deletingSkillIndex() !== si\" class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n      <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeSkillEditor()\">\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n                }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillShowFieldErrors && skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Profession Type</label>\r\n                  <div class=\"d-flex align-items-start gap-2\">\r\n                    <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                      [ngModel]=\"skillForm()?.professionId\" (change)=\"onSkillProfessionChange($event)\"\r\n                      name=\"skillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                    </ng-select>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                      (click)=\"openCustomProfessionForm('skill')\">+</button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillShowFieldErrors && isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"rating-count text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                  <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? 0 : +$event })\" name=\"skillYear\" min=\"0\"\r\n                    max=\"30\" placeholder=\"Years of Experience\" />\r\n                </div>\r\n\r\n                <div class=\"col-md-4 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\" id=\"skillVisible\" />\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n                    placeholder=\"Enter additional details (optional)\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n                [disabled]=\"deletingSkillIndex() === editingSkillIndex()\">\r\n                <span *ngIf=\"deletingSkillIndex() === editingSkillIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n                <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || !educationSectionHasUnsavedItems() || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addEducation()\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\r\n        <form class=\"row g-2 education-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n            <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Education File</label>\r\n            <input #newEducationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n              <span>{{ tempEducation()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeEducationFile(); newEducationAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n            (click)=\"saveEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <ng-container *ngIf=\"editingEducationIndex() !== ei; else editEdu\">\r\n          <div class=\"d-flex justify-content-between align-items-start\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n                [disabled]=\"deletingEducationIndex() === ei\" title=\"Delete\">\r\n                <span *ngIf=\"deletingEducationIndex() === ei\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingEducationIndex() !== ei\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editEdu>\r\n          <div *ngIf=\"tempEducationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempEducationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 education-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n              <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Education File</label>\r\n              <input #educationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n                <span>{{ tempEducation()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeEducationFile(); educationAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n              <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  </div>\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary preview-back-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" (click)=\"onBackClick()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\" style=\"vertical-align:-0.1em\">\r\n        <path d=\"M11 3 5 8l6 5\" />\r\n      </svg> Back\r\n    </button>\r\n    <button class=\"btn btn-primary preview-dashboard-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n      (click)=\"onGoToDashboardClick()\">\r\n      <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\" style=\"z-index: 9999999;\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can link it to this\r\n      {{ customProfessionContextLabel }}.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setTempCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkSkillProfessionId\" (change)=\"onBulkSkillProfessionChange($event)\"\r\n          name=\"bulkSkillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-skill')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkToolProfessionId\" (change)=\"onBulkToolProfessionChange($event)\"\r\n          name=\"bulkToolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-tool')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n        <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{color:#69707d}.res-flex:hover,.res-flex:focus,.res-flex:active{transform:none!important;box-shadow:none!important}::ng-deep .profession-acc-checkbox .form-check-input{margin-left:unset!important}.profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion{font-size:12px;color:#69707d;max-height:480px;overflow-y:auto;margin-right:6px;position:relative;isolation:isolate;contain:paint}.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 1fr 1fr 1fr 50px;align-items:center;gap:12px}.profession-acc-columns>*,.profession-acc-header>*{min-width:0}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase;position:sticky;top:0;z-index:2;background:#fff}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header .profession-acc-checkbox{display:flex;align-items:center;justify-content:center}.profession-acc-header .profession-acc-checkbox input[type=checkbox]{margin:0}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d;display:flex;align-items:center;flex-wrap:wrap;gap:4px;overflow:hidden}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical;font-size:12px}.profession-notes-input::placeholder{font-size:12px}.responsibilities-textarea{min-height:130px;resize:vertical}@media (max-width: 767.98px){.profession-acc-header{grid-template-columns:24px 1fr 24px;grid-template-areas:\"checkbox name    chevron\" \"checkbox group   chevron\" \"checkbox type    chevron\";row-gap:4px}.profession-acc-checkbox{grid-area:checkbox}.profession-acc-name{grid-area:name}.profession-acc-group,.profession-acc-type{font-size:12px;color:#69707d}.profession-acc-group{grid-area:group}.profession-acc-group:before{content:\"Group: \";font-weight:600}.profession-acc-type{grid-area:type}.profession-acc-type:before{content:\"Type: \";font-weight:600}.profession-acc-chevron-btn{grid-area:chevron}.profession-acc-fields{gap:16px}}.container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#69707d}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-size:18px;font-weight:700;color:#69707d;margin:0}.preview-subtitle{margin-top:7px;font-size:14px;color:#69707d}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:5px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:12px;color:#69707d}.extra-small{font-size:.8rem}.card{transition:box-shadow .2s ease}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px)}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:background-color .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;max-width:calc(100vw - 32px);background:#fff;border-radius:10px;padding:16px}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.add-profession-plus-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;min-width:31px;width:31px;height:31px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border:1px solid #dc3545;color:#dc3545;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:5px!important;background:transparent!important;border:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.remove-file-icon{width:16px;height:16px;object-fit:contain;cursor:pointer;vertical-align:middle;filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-size:14px;font-weight:600;color:#69707d}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.confirm-modal-card h4{font-size:20px}.confirm-modal-card .btn{font-size:14px}.confirm-modal-card .form-control,.confirm-modal-card .form-select{font-size:12px}.year-experience-select{max-height:150px}::ng-deep .ng-dropdown-panel{min-width:180px;z-index:2147483647!important;border-radius:6px!important;overflow:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom,::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:6px!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px;overflow-y:auto}@media screen and (max-width: 768px){.res-flex{flex-wrap:wrap!important;justify-content:center!important}.res-flex .fw-normal{width:100%;text-align:center;font-size:14px!important}.d-flex.flex-wrap.gap-2.p-3.bg-white.border.rounded.shadow-sm{justify-content:center}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:53%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:5px;background:#4077ad;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9;filter:invert(47%) sepia(8%) saturate(483%) hue-rotate(176deg) brightness(91%) contrast(87%)}.section-header-title h5.fw-bold{color:#69707d}.text-muted{color:#69707d!important;font-size:12px}h6.text-uppercase.fw-bold.text-muted{font-size:14px;color:#69707d!important}.company-detail-label{font-size:14px;font-weight:700;text-transform:uppercase;color:#69707d!important}.work-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-radius:5px!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-radius:5px!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:14px;font-weight:700;color:#69707d;margin-bottom:3px;display:block}.item-name-text,.field-value-sm{font-size:12px;color:#69707d}.item-title-sm{font-size:14px;color:#69707d!important}.item-meta-line{display:block;font-size:12px;color:#69707d;margin-top:3px}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:5px;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:14px}.empty-state-wrap:hover{background:#f0f6ff;border-color:#4077ad}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:5px;font-size:12px}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#fff,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:5px 5px 0 0}.profile-header-card{border:1px solid #e2e8f0!important}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.provider-layout{display:flex;flex-direction:column}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important;padding:.375rem .75rem;line-height:1.5}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important;border-radius:5px!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.preview-back-btn{background-color:#426c85!important;border-color:#426c85!important;color:#fff!important}.preview-dashboard-btn{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:transparent!important;border-color:#198754!important;color:#198754!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important;border-radius:5px!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn{border-radius:5px!important;box-shadow:none!important;font-size:14px}.rating-count{font-size:14px}.card-footer.bg-white .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}.skill-tool-editor-card label,.skill-tool-editor-card .form-control,.skill-tool-editor-card .form-select{font-size:12px}.skill-tool-editor-card .form-control::placeholder{font-size:12px}.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-select-container,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-placeholder,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-value-label{font-size:12px}.skill-tool-editor-card .form-control:not(textarea){height:32px!important}::ng-deep .skill-tool-editor-select .ng-option,::ng-deep .skill-tool-editor-select .ng-placeholder{font-size:12px}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#4077ad!important;border-color:#e0edf2!important}.work-editor-row label,.work-editor-row .form-control{font-size:12px}.work-editor-row .form-control::placeholder{font-size:12px}.education-editor-row label,.education-editor-row .form-control{font-size:12px}.education-editor-row .form-control::placeholder{font-size:12px}::ng-deep .education-degree-type-select .ng-select-container,::ng-deep .education-degree-type-select .ng-placeholder,::ng-deep .education-degree-type-select .ng-value-label,::ng-deep .education-degree-type-select .ng-option{font-size:12px}.license-editor-row label,.license-editor-row .form-control{font-size:12px}.license-editor-row .form-control::placeholder{font-size:12px}.certification-editor-row label,.certification-editor-row .form-control{font-size:12px}.certification-editor-row .form-control::placeholder{font-size:12px}::ng-deep .certification-profession-select .ng-select-container,::ng-deep .certification-profession-select .ng-placeholder,::ng-deep .certification-profession-select .ng-value-label,::ng-deep .certification-profession-select .ng-option{font-size:12px}.update-profile-card label,.update-profile-card .form-control,.update-profile-card .form-select{font-size:12px}.update-profile-card .form-control::placeholder{font-size:12px}.update-profile-card ::ng-deep im-address-verify-field .form-control{font-size:12px}.update-profile-card textarea.form-control{min-height:110px;resize:vertical}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}label{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i7.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i7.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: NgxStarsModule }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i11$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: TextMaskModule }, { kind: "ngmodule", type: AddressVerifyFieldModule }, { kind: "component", type: AddressVerifyFieldComponent, selector: "im-address-verify-field", inputs: ["placeholder", "options", "maxLength", "inputId", "name", "autocompleteAttr", "inputClass", "invalid", "inputStyle", "initialLat", "initialLng"], outputs: ["addressResolved", "manualEdit"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, deps: [{ token: CredentialingStore }, { token: FileService }, { token: UserSkillSetService }, { token: UserToolService }, { token: ProfessionService }, { token: UserProfessionService }, { token: UserDocumentService }, { token: UserEducationService }, { token: UserDetailService }, { token: UserExperienceService }, { token: i1$3.TokenService }, { token: i1$3.RoleContextService }, { token: ProvidersService }, { token: FrontEndProvidersService }, { token: i0.ChangeDetectorRef }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: true, selector: "app-preview", inputs: { providerId: "providerId", isResume: "isResume", resumeModel: "resumeModel", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", signatureFileId: "signatureFileId", signatureUrl: "signatureUrl" }, outputs: { backToParent: "backToParent" }, viewQueries: [{ propertyName: "companyForm", first: true, predicate: ["companyForm"], descendants: true }], ngImport: i0, template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4 pt-0'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData && !isResume\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3 section-header-title\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Personal & Company Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">First name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n            <input type=\"email\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" [options]=\"options\"\r\n              inputClass=\"form-control form-control-sm\" [invalid]=\"!tempProfile?.address?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">Home address is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n            <input type=\"number\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <div class=\"position-relative\">\r\n              <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); setupHeadshotFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\"\r\n              [options]=\"options\" inputClass=\"form-control form-control-sm\"\r\n              [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #setupCompanyLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); setupCompanyLogoInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer  d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 \"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\"headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n                <span class=\"badge border section-flag\"\r\n                  [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                  {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\r\n          </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer  d-flex align-items-center justify-content-between\">\r\n          <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm update-profile-card\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n                placeholder=\"First Name\" required #fName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n                placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n                required email #email=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\(\\d{3}\\) \\d{3}-\\d{4}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n                placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n                title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input type=\"number\" class=\"form-control\" [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0)}\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"1\"\r\n                #yearsOfExperience=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"address\" [options]=\"options\"\r\n                placeholder=\"Home Address\" required #address=\"ngModel\"\r\n                [invalid]=\"address.invalid && (address.dirty || address.touched)\"\r\n                [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n                (addressResolved)=\"onUserAddressResolved($event)\"\r\n                (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n                address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n                required #city=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n                required #state=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n                required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n                (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n                required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n                is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n                Zip code must be up to 6 digits\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n                placeholder=\"Country\" required #country=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n                is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #updateProfileHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"updateProfileHeadshotFile\" />\r\n              <div class=\"position-relative\">\r\n                <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                       placeholder=\"Upload Profile Picture\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                  <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n                </div>\r\n              </div>\r\n              <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\" *ngIf=\"headshotPreviewUrl\">Preview</label>\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"headshotPreviewUrl\">\r\n                <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); updateProfileHeadshotFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic || !isBasicFormValid\" (click)=\"save()\">\r\n            <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData && !isResume\">\r\n    <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-0\">\r\n        <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!companyLogoUrl()\">\r\n                {{ (companyDetails()?.companyName?.[0] || '') | uppercase }}{{ (companyDetails()?.companyName?.[1] || '') | uppercase }}\r\n              </div>\r\n              <img *ngIf=\"companyLogoUrl()\" [src]=\"companyLogoUrl()\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;background:#fff;\" alt=\"Company Logo\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ companyDetails()?.companyName }}</h2>\r\n                  <span class=\"badge border section-flag\"\r\n                    [ngClass]=\"companyDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                    {{ companyDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                  </span>\r\n                </div>\r\n                <p class=\"text-muted\">{{ companyDetails()?.companyPhoneNumber }}</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.companyPhoneNumber }}</span>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Address</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.address1 }}, {{ companyDetails()?.city }}, {{ companyDetails()?.state }}, {{ companyDetails()?.zipcode }}, {{ companyDetails()?.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-footer d-flex align-items-center justify-content-between\">\r\n        <span *ngIf=\"!companyDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n          <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your company info.\r\n        </span>\r\n        <span *ngIf=\"companyDetailsSaved\" class=\"small text-success fw-semibold\">\r\n          <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Company details saved.\r\n        </span>\r\n        <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"card shadow-sm\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{ 'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n              Company phone must be 10 digits\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" [options]=\"options\"\r\n              required [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); uploadCompanyFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n        <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Profession</h5>\r\n        <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          {{ selectedProfessionCount }} selected\r\n        </span>\r\n      </div>\r\n      <button type=\"button\" class=\"btn btn-sm btn-primary px-4\"\r\n        [disabled]=\"selectedProfessionCount === 0 || isSavingProfessionsTable\"\r\n        (click)=\"submitProfessions()\">\r\n        <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingProfessionsTable ? 'Saving...' : professionSubmitLabel }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"mb-3\">\r\n      <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n        [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n        (keydown.enter)=\"createManualProfessionRow()\" />\r\n    </div>\r\n\r\n    <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n      <div class=\"profession-acc-columns\">\r\n        <span></span>\r\n        <span>Profession Name</span>\r\n        <span>Group</span>\r\n        <span>Type</span>\r\n        <span></span>\r\n      </div>\r\n\r\n      <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n        <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n          <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n            <div class=\"text-center profession-acc-checkbox\" (click)=\"$event.stopPropagation()\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                (change)=\"onProfessionRowCheck(p, $event)\" />\r\n            </div>\r\n            <div class=\"profession-acc-name\">\r\n              {{ p.professionName }}\r\n              <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n            </div>\r\n            <div class=\"profession-acc-group\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                  (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                  placeholder=\"Select group\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n            </div>\r\n            <div class=\"profession-acc-type\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                  (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                  placeholder=\"Select type\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n            </div>\r\n            <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n              (click)=\"toggleProfessionRow(p)\"\r\n              [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n              <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"6 9 12 15 18 9\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-panel\">\r\n              <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3 text-end\">\r\n                Select a Group and Type above to enable saving this profession.\r\n              </div>\r\n              <div class=\"profession-acc-fields\">\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                  <div class=\"profession-acc-stars\">\r\n                    <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                      (click)=\"setProfessionRowStars(p, s)\"\r\n                      [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                      [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                      [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                    <span class=\"small text-muted\">Yrs</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                  <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                    [name]=\"'profVis-' + p.id\" />\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                  <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                  <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                    [name]=\"'profNotes-' + p.id\" placeholder=\"Add details here\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n        <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n        <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n          Add \"{{ professionSearchQry?.trim() }}\"\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n        class=\"text-center text-muted small py-3\">\r\n        No professions found.\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || !workSectionHasUnsavedItems() || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\" role=\"button\"\r\n      (click)=\"addJob()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush  rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel mb-2\">\r\n        <form class=\"row g-2 work-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n          </div>\r\n          <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n            <div class=\"form-check d-flex align-items-center\">\r\n              <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n              <label class=\"form-check-label ps-2 mb-0\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              name=\"newEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n              required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n            <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newWorkAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeJobFile(); newWorkAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n                formatMonthYear(job.endDate) }}</span>\r\n              <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n              title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n              [disabled]=\"deletingJobIndex() === i\" title=\"Delete\">\r\n              <span *ngIf=\"deletingJobIndex() === i\" class=\"spinner-border spinner-border-sm\"></span>\r\n              <img *ngIf=\"deletingJobIndex() !== i\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <div class=\"mt-3  p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"tempJobIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ tempJobIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2 work-editor-row\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n                <div class=\"form-check d-flex align-items-center\">\r\n                  <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n                  <label class=\"form-check-label ps-2 mb-0\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n                  name=\"endDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\"\r\n                  *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n                <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Certification File</label>\r\n                <input #workAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n                <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"removeJobFile(); workAttachmentInput.value=''\" title=\"Remove file\">\r\n                    <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4 \" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || !certificationSectionHasUnsavedItems() || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addCertification()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 certification-editor-row\">\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Profession Type</label>\r\n            <div class=\"d-flex align-items-start gap-2\">\r\n              <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                name=\"newCertProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n              </ng-select>\r\n              <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certification Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newCertAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeCertificationFile(); newCertAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\"\r\n            [disabled]=\"isSavingCertification\"\r\n            (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n                (click)=\"deleteCertification(ci)\" [disabled]=\"deletingCertificationIndex() === ci\" title=\"Delete\">\r\n                <span *ngIf=\"deletingCertificationIndex() === ci\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingCertificationIndex() !== ci\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"tempCertificationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempCertificationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 certification-editor-row\">\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Profession Type</label>\r\n              <div class=\"d-flex align-items-start gap-2\">\r\n                <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                  [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                  name=\"certProfessionType{{ ci }}\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                </ng-select>\r\n                <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                  (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certification Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Certification File</label>\r\n              <input #certAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeCertificationFile(); certAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n              (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || !licenseSectionHasUnsavedItems() || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addLicense()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 license-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">License File</label>\r\n            <input #newLicenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeLicenseFile(); newLicenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n            (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n                [disabled]=\"deletingLicenseIndex() === li\" title=\"Delete\">\r\n                <span *ngIf=\"deletingLicenseIndex() === li\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingLicenseIndex() !== li\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"tempLicenseIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempLicenseIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 license-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">License File</label>\r\n              <input #licenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeLicenseFile(); licenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n              (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || !toolsSectionHasUnsavedItems() || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\"\r\n          class=\"btn btn-light border res-flex  d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n          <span class=\"fw-normal item-name-text\">{{ tool }}</span>\r\n          <span class=\"badge border ms-1\"\r\n            [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n          <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n            class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n            Missing info\r\n          </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\"\r\n          [disabled]=\"deletingToolIndex() === ti\">\r\n          <span *ngIf=\"deletingToolIndex() === ti\" class=\"spinner-border spinner-border-sm\"></span>\r\n          <span *ngIf=\"deletingToolIndex() !== ti\" class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeToolEditor()\">\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n            </div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolShowFieldErrors && toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Profession Type</label>\r\n                <div class=\"d-flex align-items-start gap-2\">\r\n                  <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                    [ngModel]=\"toolForm()?.professionId\" (change)=\"onToolProfessionChange($event)\"\r\n                    name=\"toolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                  </ng-select>\r\n                  <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                    (click)=\"openCustomProfessionForm('tool')\">+</button>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolShowFieldErrors && isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"rating-count text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? 0 : +$event })\" name=\"toolYear\" min=\"0\"\r\n                  max=\"30\" placeholder=\"Years of Experience\" />\r\n              </div>\r\n\r\n              <div class=\"col-md-4 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                  (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\" />\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n                  placeholder=\"Enter additional details (optional)\"></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\"\r\n              [disabled]=\"deletingToolIndex() === editingToolIndex()\">\r\n              <span *ngIf=\"deletingToolIndex() === editingToolIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n              <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || !skillsSectionHasUnsavedItems() || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\"\r\n            class=\"btn btn-light border  res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n            <span class=\"fw-normal item-name-text\">{{ skill }}</span>\r\n            <span class=\"badge border ms-1\"\r\n              [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\" [disabled]=\"deletingSkillIndex() === si\">\r\n            <span *ngIf=\"deletingSkillIndex() === si\" class=\"spinner-border spinner-border-sm\"></span>\r\n            <span *ngIf=\"deletingSkillIndex() !== si\" class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n      <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeSkillEditor()\">\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n                }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillShowFieldErrors && skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Profession Type</label>\r\n                  <div class=\"d-flex align-items-start gap-2\">\r\n                    <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                      [ngModel]=\"skillForm()?.professionId\" (change)=\"onSkillProfessionChange($event)\"\r\n                      name=\"skillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                    </ng-select>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                      (click)=\"openCustomProfessionForm('skill')\">+</button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillShowFieldErrors && isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"rating-count text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                  <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? 0 : +$event })\" name=\"skillYear\" min=\"0\"\r\n                    max=\"30\" placeholder=\"Years of Experience\" />\r\n                </div>\r\n\r\n                <div class=\"col-md-4 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\" id=\"skillVisible\" />\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n                    placeholder=\"Enter additional details (optional)\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n                [disabled]=\"deletingSkillIndex() === editingSkillIndex()\">\r\n                <span *ngIf=\"deletingSkillIndex() === editingSkillIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n                <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || !educationSectionHasUnsavedItems() || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addEducation()\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\r\n        <form class=\"row g-2 education-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n            <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Education File</label>\r\n            <input #newEducationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n              <span>{{ tempEducation()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeEducationFile(); newEducationAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n            (click)=\"saveEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <ng-container *ngIf=\"editingEducationIndex() !== ei; else editEdu\">\r\n          <div class=\"d-flex justify-content-between align-items-start\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n                [disabled]=\"deletingEducationIndex() === ei\" title=\"Delete\">\r\n                <span *ngIf=\"deletingEducationIndex() === ei\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingEducationIndex() !== ei\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editEdu>\r\n          <div *ngIf=\"tempEducationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempEducationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 education-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n              <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Education File</label>\r\n              <input #educationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n                <span>{{ tempEducation()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeEducationFile(); educationAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n              <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  </div>\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary preview-back-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" (click)=\"onBackClick()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\" style=\"vertical-align:-0.1em\">\r\n        <path d=\"M11 3 5 8l6 5\" />\r\n      </svg> Back\r\n    </button>\r\n    <button class=\"btn btn-primary preview-dashboard-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n      (click)=\"onGoToDashboardClick()\">\r\n      <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\" style=\"z-index: 9999999;\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can link it to this\r\n      {{ customProfessionContextLabel }}.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setTempCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkSkillProfessionId\" (change)=\"onBulkSkillProfessionChange($event)\"\r\n          name=\"bulkSkillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-skill')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkToolProfessionId\" (change)=\"onBulkToolProfessionChange($event)\"\r\n          name=\"bulkToolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-tool')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n        <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{color:#69707d}.res-flex:hover,.res-flex:focus,.res-flex:active{transform:none!important;box-shadow:none!important}::ng-deep .profession-acc-checkbox .form-check-input{margin-left:unset!important}.profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion{font-size:12px;color:#69707d;max-height:480px;overflow-y:auto;margin-right:6px;position:relative;isolation:isolate;contain:paint}.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 1fr 1fr 1fr 50px;align-items:center;gap:12px}.profession-acc-columns>*,.profession-acc-header>*{min-width:0}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase;position:sticky;top:0;z-index:2;background:#fff}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header .profession-acc-checkbox{display:flex;align-items:center;justify-content:center}.profession-acc-header .profession-acc-checkbox input[type=checkbox]{margin:0}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d;display:flex;align-items:center;flex-wrap:wrap;gap:4px;overflow:hidden}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical;font-size:12px}.profession-notes-input::placeholder{font-size:12px}.responsibilities-textarea{min-height:130px;resize:vertical}@media (max-width: 767.98px){.profession-acc-header{grid-template-columns:24px 1fr 24px;grid-template-areas:\"checkbox name    chevron\" \"checkbox group   chevron\" \"checkbox type    chevron\";row-gap:4px}.profession-acc-checkbox{grid-area:checkbox}.profession-acc-name{grid-area:name}.profession-acc-group,.profession-acc-type{font-size:12px;color:#69707d}.profession-acc-group{grid-area:group}.profession-acc-group:before{content:\"Group: \";font-weight:600}.profession-acc-type{grid-area:type}.profession-acc-type:before{content:\"Type: \";font-weight:600}.profession-acc-chevron-btn{grid-area:chevron}.profession-acc-fields{gap:16px}}.container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#69707d}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-size:18px;font-weight:700;color:#69707d;margin:0}.preview-subtitle{margin-top:7px;font-size:14px;color:#69707d}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:5px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:12px;color:#69707d}.extra-small{font-size:.8rem}.card{transition:box-shadow .2s ease}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px)}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:background-color .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;max-width:calc(100vw - 32px);background:#fff;border-radius:10px;padding:16px}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.add-profession-plus-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;min-width:31px;width:31px;height:31px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border:1px solid #dc3545;color:#dc3545;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:5px!important;background:transparent!important;border:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.remove-file-icon{width:16px;height:16px;object-fit:contain;cursor:pointer;vertical-align:middle;filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-size:14px;font-weight:600;color:#69707d}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.confirm-modal-card h4{font-size:20px}.confirm-modal-card .btn{font-size:14px}.confirm-modal-card .form-control,.confirm-modal-card .form-select{font-size:12px}.year-experience-select{max-height:150px}::ng-deep .ng-dropdown-panel{min-width:180px;z-index:2147483647!important;border-radius:6px!important;overflow:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom,::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:6px!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px;overflow-y:auto}@media screen and (max-width: 768px){.res-flex{flex-wrap:wrap!important;justify-content:center!important}.res-flex .fw-normal{width:100%;text-align:center;font-size:14px!important}.d-flex.flex-wrap.gap-2.p-3.bg-white.border.rounded.shadow-sm{justify-content:center}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:53%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:5px;background:#4077ad;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9;filter:invert(47%) sepia(8%) saturate(483%) hue-rotate(176deg) brightness(91%) contrast(87%)}.section-header-title h5.fw-bold{color:#69707d}.text-muted{color:#69707d!important;font-size:12px}h6.text-uppercase.fw-bold.text-muted{font-size:14px;color:#69707d!important}.company-detail-label{font-size:14px;font-weight:700;text-transform:uppercase;color:#69707d!important}.work-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-radius:5px!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-radius:5px!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:14px;font-weight:700;color:#69707d;margin-bottom:3px;display:block}.item-name-text,.field-value-sm{font-size:12px;color:#69707d}.item-title-sm{font-size:14px;color:#69707d!important}.item-meta-line{display:block;font-size:12px;color:#69707d;margin-top:3px}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:5px;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:14px}.empty-state-wrap:hover{background:#f0f6ff;border-color:#4077ad}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:5px;font-size:12px}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#fff,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:5px 5px 0 0}.profile-header-card{border:1px solid #e2e8f0!important}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.provider-layout{display:flex;flex-direction:column}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important;padding:.375rem .75rem;line-height:1.5}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important;border-radius:5px!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.preview-back-btn{background-color:#426c85!important;border-color:#426c85!important;color:#fff!important}.preview-dashboard-btn{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:transparent!important;border-color:#198754!important;color:#198754!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important;border-radius:5px!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn{border-radius:5px!important;box-shadow:none!important;font-size:14px}.rating-count{font-size:14px}.card-footer.bg-white .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}.skill-tool-editor-card label,.skill-tool-editor-card .form-control,.skill-tool-editor-card .form-select{font-size:12px}.skill-tool-editor-card .form-control::placeholder{font-size:12px}.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-select-container,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-placeholder,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-value-label{font-size:12px}.skill-tool-editor-card .form-control:not(textarea){height:32px!important}::ng-deep .skill-tool-editor-select .ng-option,::ng-deep .skill-tool-editor-select .ng-placeholder{font-size:12px}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#4077ad!important;border-color:#e0edf2!important}.work-editor-row label,.work-editor-row .form-control{font-size:12px}.work-editor-row .form-control::placeholder{font-size:12px}.education-editor-row label,.education-editor-row .form-control{font-size:12px}.education-editor-row .form-control::placeholder{font-size:12px}::ng-deep .education-degree-type-select .ng-select-container,::ng-deep .education-degree-type-select .ng-placeholder,::ng-deep .education-degree-type-select .ng-value-label,::ng-deep .education-degree-type-select .ng-option{font-size:12px}.license-editor-row label,.license-editor-row .form-control{font-size:12px}.license-editor-row .form-control::placeholder{font-size:12px}.certification-editor-row label,.certification-editor-row .form-control{font-size:12px}.certification-editor-row .form-control::placeholder{font-size:12px}::ng-deep .certification-profession-select .ng-select-container,::ng-deep .certification-profession-select .ng-placeholder,::ng-deep .certification-profession-select .ng-value-label,::ng-deep .certification-profession-select .ng-option{font-size:12px}.update-profile-card label,.update-profile-card .form-control,.update-profile-card .form-select{font-size:12px}.update-profile-card .form-control::placeholder{font-size:12px}.update-profile-card ::ng-deep im-address-verify-field .form-control{font-size:12px}.update-profile-card textarea.form-control{min-height:110px;resize:vertical}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}label{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i7.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i7.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: NgxStarsModule }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i11$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: TextMaskModule }, { kind: "ngmodule", type: AddressVerifyFieldModule }, { kind: "component", type: AddressVerifyFieldComponent, selector: "im-address-verify-field", inputs: ["placeholder", "options", "maxLength", "inputId", "name", "autocompleteAttr", "inputClass", "invalid", "inputStyle", "initialLat", "initialLng"], outputs: ["addressResolved", "manualEdit"] }, { kind: "pipe", type: i11.UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
@@ -7692,8 +7717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CommonModule, ModalModule, FormsModule, ReactiveFormsModule,
                         NgSelectModule, NgxStarsModule, BsDatepickerModule, TextMaskModule,
                         AddressVerifyFieldModule
-                    ], template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4 pt-0'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData && !isResume\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3 section-header-title\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Personal & Company Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">First name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n            <input type=\"email\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" [options]=\"options\"\r\n              inputClass=\"form-control form-control-sm\" [invalid]=\"!tempProfile?.address?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">Home address is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n            <input type=\"number\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <div class=\"position-relative\">\r\n              <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); setupHeadshotFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\"\r\n              [options]=\"options\" inputClass=\"form-control form-control-sm\"\r\n              [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #setupCompanyLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); setupCompanyLogoInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer  d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 \"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\"headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n                <span class=\"badge border section-flag\"\r\n                  [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                  {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\r\n          </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer  d-flex align-items-center justify-content-between\">\r\n          <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm update-profile-card\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n                placeholder=\"First Name\" required #fName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n                placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n                required email #email=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\(\\d{3}\\) \\d{3}-\\d{4}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n                placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n                title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input type=\"number\" class=\"form-control\" [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0)}\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"1\"\r\n                #yearsOfExperience=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"address\" [options]=\"options\"\r\n                placeholder=\"Home Address\" required #address=\"ngModel\"\r\n                [invalid]=\"address.invalid && (address.dirty || address.touched)\"\r\n                [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n                (addressResolved)=\"onUserAddressResolved($event)\"\r\n                (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n                address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n                required #city=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n                required #state=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n                required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n                (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n                required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n                is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n                Zip code must be up to 6 digits\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n                placeholder=\"Country\" required #country=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n                is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #updateProfileHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"updateProfileHeadshotFile\" />\r\n              <div class=\"position-relative\">\r\n                <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                       placeholder=\"Upload Profile Picture\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                  <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n                </div>\r\n              </div>\r\n              <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\" *ngIf=\"headshotPreviewUrl\">Preview</label>\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"headshotPreviewUrl\">\r\n                <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); updateProfileHeadshotFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic || !isBasicFormValid\" (click)=\"save()\">\r\n            <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData && !isResume\">\r\n    <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-0\">\r\n        <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!companyLogoUrl()\">\r\n                <img src=\"/assets/images/icons/building.svg\" width=\"24\" height=\"24\" alt=\"\" style=\"filter: brightness(0) invert(1);\" />\r\n              </div>\r\n              <img *ngIf=\"companyLogoUrl()\" [src]=\"companyLogoUrl()\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;background:#fff;\" alt=\"Company Logo\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ companyDetails()?.companyName }}</h2>\r\n                  <span class=\"badge border section-flag\"\r\n                    [ngClass]=\"companyDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                    {{ companyDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                  </span>\r\n                </div>\r\n                <p class=\"text-muted\">{{ companyDetails()?.companyPhoneNumber }}</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.companyPhoneNumber }}</span>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Address</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.address1 }}, {{ companyDetails()?.city }}, {{ companyDetails()?.state }}, {{ companyDetails()?.zipcode }}, {{ companyDetails()?.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-footer d-flex align-items-center justify-content-between\">\r\n        <span *ngIf=\"!companyDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n          <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your company info.\r\n        </span>\r\n        <span *ngIf=\"companyDetailsSaved\" class=\"small text-success fw-semibold\">\r\n          <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Company details saved.\r\n        </span>\r\n        <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"card shadow-sm\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{ 'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n              Company phone must be 10 digits\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" [options]=\"options\"\r\n              required [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); uploadCompanyFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n        <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Profession</h5>\r\n        <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          {{ selectedProfessionCount }} selected\r\n        </span>\r\n      </div>\r\n      <button type=\"button\" class=\"btn btn-sm btn-primary px-4\"\r\n        [disabled]=\"selectedProfessionCount === 0 || isSavingProfessionsTable\"\r\n        (click)=\"submitProfessions()\">\r\n        <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingProfessionsTable ? 'Saving...' : professionSubmitLabel }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"mb-3\">\r\n      <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n        [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n        (keydown.enter)=\"createManualProfessionRow()\" />\r\n    </div>\r\n\r\n    <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n      <div class=\"profession-acc-columns\">\r\n        <span></span>\r\n        <span>Profession Name</span>\r\n        <span>Group</span>\r\n        <span>Type</span>\r\n        <span></span>\r\n      </div>\r\n\r\n      <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n        <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n          <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n            <div class=\"text-center profession-acc-checkbox\" (click)=\"$event.stopPropagation()\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                (change)=\"onProfessionRowCheck(p, $event)\" />\r\n            </div>\r\n            <div class=\"profession-acc-name\">\r\n              {{ p.professionName }}\r\n              <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n            </div>\r\n            <div class=\"profession-acc-group\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                  (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                  placeholder=\"Select group\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n            </div>\r\n            <div class=\"profession-acc-type\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                  (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                  placeholder=\"Select type\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n            </div>\r\n            <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n              (click)=\"toggleProfessionRow(p)\"\r\n              [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n              <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"6 9 12 15 18 9\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-panel\">\r\n              <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3 text-end\">\r\n                Select a Group and Type above to enable saving this profession.\r\n              </div>\r\n              <div class=\"profession-acc-fields\">\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                  <div class=\"profession-acc-stars\">\r\n                    <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                      (click)=\"setProfessionRowStars(p, s)\"\r\n                      [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                      [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                      [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                    <span class=\"small text-muted\">Yrs</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                  <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                    [name]=\"'profVis-' + p.id\" />\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                  <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                  <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                    [name]=\"'profNotes-' + p.id\" placeholder=\"Add details here\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n        <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n        <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n          Add \"{{ professionSearchQry?.trim() }}\"\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n        class=\"text-center text-muted small py-3\">\r\n        No professions found.\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || !workSectionHasUnsavedItems() || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\" role=\"button\"\r\n      (click)=\"addJob()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush  rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel mb-2\">\r\n        <form class=\"row g-2 work-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n          </div>\r\n          <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n            <div class=\"form-check d-flex align-items-center\">\r\n              <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n              <label class=\"form-check-label ps-2 mb-0\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              name=\"newEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n              required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n            <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newWorkAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeJobFile(); newWorkAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n                formatMonthYear(job.endDate) }}</span>\r\n              <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n              title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n              [disabled]=\"deletingJobIndex() === i\" title=\"Delete\">\r\n              <span *ngIf=\"deletingJobIndex() === i\" class=\"spinner-border spinner-border-sm\"></span>\r\n              <img *ngIf=\"deletingJobIndex() !== i\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <div class=\"mt-3  p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"tempJobIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ tempJobIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2 work-editor-row\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n                <div class=\"form-check d-flex align-items-center\">\r\n                  <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n                  <label class=\"form-check-label ps-2 mb-0\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n                  name=\"endDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\"\r\n                  *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n                <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Certification File</label>\r\n                <input #workAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n                <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"removeJobFile(); workAttachmentInput.value=''\" title=\"Remove file\">\r\n                    <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4 \" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || !certificationSectionHasUnsavedItems() || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addCertification()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 certification-editor-row\">\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Profession Type</label>\r\n            <div class=\"d-flex align-items-start gap-2\">\r\n              <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                name=\"newCertProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n              </ng-select>\r\n              <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certification Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newCertAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeCertificationFile(); newCertAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\"\r\n            [disabled]=\"isSavingCertification\"\r\n            (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n                (click)=\"deleteCertification(ci)\" [disabled]=\"deletingCertificationIndex() === ci\" title=\"Delete\">\r\n                <span *ngIf=\"deletingCertificationIndex() === ci\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingCertificationIndex() !== ci\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"tempCertificationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempCertificationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 certification-editor-row\">\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Profession Type</label>\r\n              <div class=\"d-flex align-items-start gap-2\">\r\n                <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                  [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                  name=\"certProfessionType{{ ci }}\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                </ng-select>\r\n                <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                  (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certification Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Certification File</label>\r\n              <input #certAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeCertificationFile(); certAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n              (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || !licenseSectionHasUnsavedItems() || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addLicense()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 license-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">License File</label>\r\n            <input #newLicenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeLicenseFile(); newLicenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n            (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n                [disabled]=\"deletingLicenseIndex() === li\" title=\"Delete\">\r\n                <span *ngIf=\"deletingLicenseIndex() === li\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingLicenseIndex() !== li\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"tempLicenseIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempLicenseIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 license-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">License File</label>\r\n              <input #licenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeLicenseFile(); licenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n              (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || !toolsSectionHasUnsavedItems() || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\"\r\n          class=\"btn btn-light border res-flex  d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n          <span class=\"fw-normal item-name-text\">{{ tool }}</span>\r\n          <span class=\"badge border ms-1\"\r\n            [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n          <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n            class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n            Missing info\r\n          </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\"\r\n          [disabled]=\"deletingToolIndex() === ti\">\r\n          <span *ngIf=\"deletingToolIndex() === ti\" class=\"spinner-border spinner-border-sm\"></span>\r\n          <span *ngIf=\"deletingToolIndex() !== ti\" class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeToolEditor()\">\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n            </div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolShowFieldErrors && toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Profession Type</label>\r\n                <div class=\"d-flex align-items-start gap-2\">\r\n                  <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                    [ngModel]=\"toolForm()?.professionId\" (change)=\"onToolProfessionChange($event)\"\r\n                    name=\"toolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                  </ng-select>\r\n                  <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                    (click)=\"openCustomProfessionForm('tool')\">+</button>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolShowFieldErrors && isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"rating-count text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? 0 : +$event })\" name=\"toolYear\" min=\"0\"\r\n                  max=\"30\" placeholder=\"Years of Experience\" />\r\n              </div>\r\n\r\n              <div class=\"col-md-4 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                  (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\" />\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n                  placeholder=\"Enter additional details (optional)\"></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\"\r\n              [disabled]=\"deletingToolIndex() === editingToolIndex()\">\r\n              <span *ngIf=\"deletingToolIndex() === editingToolIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n              <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || !skillsSectionHasUnsavedItems() || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\"\r\n            class=\"btn btn-light border  res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n            <span class=\"fw-normal item-name-text\">{{ skill }}</span>\r\n            <span class=\"badge border ms-1\"\r\n              [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\" [disabled]=\"deletingSkillIndex() === si\">\r\n            <span *ngIf=\"deletingSkillIndex() === si\" class=\"spinner-border spinner-border-sm\"></span>\r\n            <span *ngIf=\"deletingSkillIndex() !== si\" class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n      <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeSkillEditor()\">\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n                }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillShowFieldErrors && skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Profession Type</label>\r\n                  <div class=\"d-flex align-items-start gap-2\">\r\n                    <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                      [ngModel]=\"skillForm()?.professionId\" (change)=\"onSkillProfessionChange($event)\"\r\n                      name=\"skillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                    </ng-select>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                      (click)=\"openCustomProfessionForm('skill')\">+</button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillShowFieldErrors && isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"rating-count text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                  <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? 0 : +$event })\" name=\"skillYear\" min=\"0\"\r\n                    max=\"30\" placeholder=\"Years of Experience\" />\r\n                </div>\r\n\r\n                <div class=\"col-md-4 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\" id=\"skillVisible\" />\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n                    placeholder=\"Enter additional details (optional)\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n                [disabled]=\"deletingSkillIndex() === editingSkillIndex()\">\r\n                <span *ngIf=\"deletingSkillIndex() === editingSkillIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n                <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || !educationSectionHasUnsavedItems() || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addEducation()\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\r\n        <form class=\"row g-2 education-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n            <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Education File</label>\r\n            <input #newEducationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n              <span>{{ tempEducation()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeEducationFile(); newEducationAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n            (click)=\"saveEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <ng-container *ngIf=\"editingEducationIndex() !== ei; else editEdu\">\r\n          <div class=\"d-flex justify-content-between align-items-start\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n                [disabled]=\"deletingEducationIndex() === ei\" title=\"Delete\">\r\n                <span *ngIf=\"deletingEducationIndex() === ei\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingEducationIndex() !== ei\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editEdu>\r\n          <div *ngIf=\"tempEducationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempEducationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 education-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n              <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Education File</label>\r\n              <input #educationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n                <span>{{ tempEducation()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeEducationFile(); educationAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n              <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  </div>\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary preview-back-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" (click)=\"onBackClick()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\" style=\"vertical-align:-0.1em\">\r\n        <path d=\"M11 3 5 8l6 5\" />\r\n      </svg> Back\r\n    </button>\r\n    <button class=\"btn btn-primary preview-dashboard-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n      (click)=\"onGoToDashboardClick()\">\r\n      <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\" style=\"z-index: 9999999;\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can link it to this\r\n      {{ customProfessionContextLabel }}.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setTempCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkSkillProfessionId\" (change)=\"onBulkSkillProfessionChange($event)\"\r\n          name=\"bulkSkillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-skill')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkToolProfessionId\" (change)=\"onBulkToolProfessionChange($event)\"\r\n          name=\"bulkToolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-tool')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n        <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{color:#69707d}.res-flex:hover,.res-flex:focus,.res-flex:active{transform:none!important;box-shadow:none!important}::ng-deep .profession-acc-checkbox .form-check-input{margin-left:unset!important}.profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion{font-size:12px;color:#69707d;max-height:480px;overflow-y:auto;margin-right:6px;position:relative;isolation:isolate;contain:paint}.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 1fr 1fr 1fr 50px;align-items:center;gap:12px}.profession-acc-columns>*,.profession-acc-header>*{min-width:0}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase;position:sticky;top:0;z-index:2;background:#fff}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header .profession-acc-checkbox{display:flex;align-items:center;justify-content:center}.profession-acc-header .profession-acc-checkbox input[type=checkbox]{margin:0}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d;display:flex;align-items:center;flex-wrap:wrap;gap:4px;overflow:hidden}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical;font-size:12px}.profession-notes-input::placeholder{font-size:12px}.responsibilities-textarea{min-height:130px;resize:vertical}@media (max-width: 767.98px){.profession-acc-header{grid-template-columns:24px 1fr 24px;grid-template-areas:\"checkbox name    chevron\" \"checkbox group   chevron\" \"checkbox type    chevron\";row-gap:4px}.profession-acc-checkbox{grid-area:checkbox}.profession-acc-name{grid-area:name}.profession-acc-group,.profession-acc-type{font-size:12px;color:#69707d}.profession-acc-group{grid-area:group}.profession-acc-group:before{content:\"Group: \";font-weight:600}.profession-acc-type{grid-area:type}.profession-acc-type:before{content:\"Type: \";font-weight:600}.profession-acc-chevron-btn{grid-area:chevron}.profession-acc-fields{gap:16px}}.container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#69707d}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-size:18px;font-weight:700;color:#69707d;margin:0}.preview-subtitle{margin-top:7px;font-size:14px;color:#69707d}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:5px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:12px;color:#69707d}.extra-small{font-size:.8rem}.card{transition:box-shadow .2s ease}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px)}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:background-color .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;max-width:calc(100vw - 32px);background:#fff;border-radius:10px;padding:16px}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.add-profession-plus-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;min-width:31px;width:31px;height:31px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border:1px solid #dc3545;color:#dc3545;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:5px!important;background:transparent!important;border:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.remove-file-icon{width:16px;height:16px;object-fit:contain;cursor:pointer;vertical-align:middle;filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-size:14px;font-weight:600;color:#69707d}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.confirm-modal-card h4{font-size:20px}.confirm-modal-card .btn{font-size:14px}.confirm-modal-card .form-control,.confirm-modal-card .form-select{font-size:12px}.year-experience-select{max-height:150px}::ng-deep .ng-dropdown-panel{min-width:180px;z-index:2147483647!important;border-radius:6px!important;overflow:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom,::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:6px!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px;overflow-y:auto}@media screen and (max-width: 768px){.res-flex{flex-wrap:wrap!important;justify-content:center!important}.res-flex .fw-normal{width:100%;text-align:center;font-size:14px!important}.d-flex.flex-wrap.gap-2.p-3.bg-white.border.rounded.shadow-sm{justify-content:center}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:53%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:5px;background:#4077ad;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9;filter:invert(47%) sepia(8%) saturate(483%) hue-rotate(176deg) brightness(91%) contrast(87%)}.section-header-title h5.fw-bold{color:#69707d}.text-muted{color:#69707d!important;font-size:12px}h6.text-uppercase.fw-bold.text-muted{font-size:14px;color:#69707d!important}.company-detail-label{font-size:14px;font-weight:700;text-transform:uppercase;color:#69707d!important}.work-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-radius:5px!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-radius:5px!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:14px;font-weight:700;color:#69707d;margin-bottom:3px;display:block}.item-name-text,.field-value-sm{font-size:12px;color:#69707d}.item-title-sm{font-size:14px;color:#69707d!important}.item-meta-line{display:block;font-size:12px;color:#69707d;margin-top:3px}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:5px;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:14px}.empty-state-wrap:hover{background:#f0f6ff;border-color:#4077ad}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:5px;font-size:12px}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#fff,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:5px 5px 0 0}.profile-header-card{border:1px solid #e2e8f0!important}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.provider-layout{display:flex;flex-direction:column}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important;padding:.375rem .75rem;line-height:1.5}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important;border-radius:5px!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.preview-back-btn{background-color:#426c85!important;border-color:#426c85!important;color:#fff!important}.preview-dashboard-btn{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:transparent!important;border-color:#198754!important;color:#198754!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important;border-radius:5px!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn{border-radius:5px!important;box-shadow:none!important;font-size:14px}.rating-count{font-size:14px}.card-footer.bg-white .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}.skill-tool-editor-card label,.skill-tool-editor-card .form-control,.skill-tool-editor-card .form-select{font-size:12px}.skill-tool-editor-card .form-control::placeholder{font-size:12px}.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-select-container,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-placeholder,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-value-label{font-size:12px}.skill-tool-editor-card .form-control:not(textarea){height:32px!important}::ng-deep .skill-tool-editor-select .ng-option,::ng-deep .skill-tool-editor-select .ng-placeholder{font-size:12px}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#4077ad!important;border-color:#e0edf2!important}.work-editor-row label,.work-editor-row .form-control{font-size:12px}.work-editor-row .form-control::placeholder{font-size:12px}.education-editor-row label,.education-editor-row .form-control{font-size:12px}.education-editor-row .form-control::placeholder{font-size:12px}::ng-deep .education-degree-type-select .ng-select-container,::ng-deep .education-degree-type-select .ng-placeholder,::ng-deep .education-degree-type-select .ng-value-label,::ng-deep .education-degree-type-select .ng-option{font-size:12px}.license-editor-row label,.license-editor-row .form-control{font-size:12px}.license-editor-row .form-control::placeholder{font-size:12px}.certification-editor-row label,.certification-editor-row .form-control{font-size:12px}.certification-editor-row .form-control::placeholder{font-size:12px}::ng-deep .certification-profession-select .ng-select-container,::ng-deep .certification-profession-select .ng-placeholder,::ng-deep .certification-profession-select .ng-value-label,::ng-deep .certification-profession-select .ng-option{font-size:12px}.update-profile-card label,.update-profile-card .form-control,.update-profile-card .form-select{font-size:12px}.update-profile-card .form-control::placeholder{font-size:12px}.update-profile-card ::ng-deep im-address-verify-field .form-control{font-size:12px}.update-profile-card textarea.form-control{min-height:110px;resize:vertical}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}label{margin-bottom:10px}\n"] }]
-        }], ctorParameters: () => [{ type: CredentialingStore }, { type: FileService }, { type: UserSkillSetService }, { type: UserToolService }, { type: ProfessionService }, { type: UserProfessionService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i1$3.TokenService }, { type: i1$3.RoleContextService }, { type: ProvidersService$1 }, { type: ProvidersService }, { type: FrontEndProvidersService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    ], template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4 pt-0'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData && !isResume\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3 section-header-title\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Personal & Company Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">First name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n            <input type=\"email\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" [options]=\"options\"\r\n              inputClass=\"form-control form-control-sm\" [invalid]=\"!tempProfile?.address?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">Home address is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-2\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n            <input type=\"number\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <div class=\"position-relative\">\r\n              <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); setupHeadshotFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\"\r\n              [options]=\"options\" inputClass=\"form-control form-control-sm\"\r\n              [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #setupCompanyLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); setupCompanyLogoInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer  d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 \"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\"headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n                <span class=\"badge border section-flag\"\r\n                  [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                  {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\r\n          </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer  d-flex align-items-center justify-content-between\">\r\n          <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm update-profile-card\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n                placeholder=\"First Name\" required #fName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n                placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n                required email #email=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\(\\d{3}\\) \\d{3}-\\d{4}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n                placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n                title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input type=\"number\" class=\"form-control\" [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0)}\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"1\"\r\n                #yearsOfExperience=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <im-address-verify-field [(ngModel)]=\"tempProfile.address\" name=\"address\" [options]=\"options\"\r\n                placeholder=\"Home Address\" required #address=\"ngModel\"\r\n                [invalid]=\"address.invalid && (address.dirty || address.touched)\"\r\n                [initialLat]=\"tempProfile.latitude\" [initialLng]=\"tempProfile.longitude\"\r\n                (addressResolved)=\"onUserAddressResolved($event)\"\r\n                (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n                address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n                required #city=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n                required #state=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n                required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n                (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n                required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n                is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n                Zip code must be up to 6 digits\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n                placeholder=\"Country\" required #country=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n                is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #updateProfileHeadshotFile type=\"file\" accept=\".png,.jpg,.jpeg\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"updateProfileHeadshotFile\" />\r\n              <div class=\"position-relative\">\r\n                <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                       placeholder=\"Upload Profile Picture\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <img *ngIf=\"!isHeadshotLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:18px;\" (click)=\"updateProfileHeadshotFile.click()\" />\r\n                <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:50%;transform:translateY(-50%);\">\r\n                  <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n                </div>\r\n              </div>\r\n              <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\" *ngIf=\"headshotPreviewUrl\">Preview</label>\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"headshotPreviewUrl\">\r\n                <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeHeadshotFile(); updateProfileHeadshotFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"5\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic || !isBasicFormValid\" (click)=\"save()\">\r\n            <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData && !isResume\">\r\n    <div class=\"card profile-header-card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-0\">\r\n        <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!companyLogoUrl()\">\r\n                {{ (companyDetails()?.companyName?.[0] || '') | uppercase }}{{ (companyDetails()?.companyName?.[1] || '') | uppercase }}\r\n              </div>\r\n              <img *ngIf=\"companyLogoUrl()\" [src]=\"companyLogoUrl()\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;background:#fff;\" alt=\"Company Logo\" />\r\n              <div>\r\n                <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                  <h2 class=\"fw-bold mb-1\">{{ companyDetails()?.companyName }}</h2>\r\n                  <span class=\"badge border section-flag\"\r\n                    [ngClass]=\"companyDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                    {{ companyDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                  </span>\r\n                </div>\r\n                <p class=\"text-muted\">{{ companyDetails()?.companyPhoneNumber }}</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"px-4 py-3\">\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.companyPhoneNumber }}</span>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Company Address</span>\r\n              <span class=\"field-value-sm d-block\">{{ companyDetails()?.address1 }}, {{ companyDetails()?.city }}, {{ companyDetails()?.state }}, {{ companyDetails()?.zipcode }}, {{ companyDetails()?.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-footer d-flex align-items-center justify-content-between\">\r\n        <span *ngIf=\"!companyDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n          <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your company info.\r\n        </span>\r\n        <span *ngIf=\"companyDetailsSaved\" class=\"small text-success fw-semibold\">\r\n          <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Company details saved.\r\n        </span>\r\n        <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"card shadow-sm\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{ 'is-invalid': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n              Company phone must be 10 digits\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <im-address-verify-field [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" [options]=\"options\"\r\n              required [invalid]=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\"\r\n              [initialLat]=\"tempCompanyDetails.latitude\" [initialLng]=\"tempCompanyDetails.longitude\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n            <small class=\"text-muted d-block mt-1\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoFile(); uploadCompanyFile.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div class=\"card-footer  text-end gap-2 d-flex justify-content-end\">\r\n        <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Profession</h5>\r\n        <span *ngIf=\"selectedProfessionCount > 0\" class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          {{ selectedProfessionCount }} selected\r\n        </span>\r\n      </div>\r\n      <button type=\"button\" class=\"btn btn-sm btn-primary px-4\"\r\n        [disabled]=\"selectedProfessionCount === 0 || isSavingProfessionsTable\"\r\n        (click)=\"submitProfessions()\">\r\n        <span *ngIf=\"isSavingProfessionsTable\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingProfessionsTable ? 'Saving...' : professionSubmitLabel }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"mb-3\">\r\n      <input type=\"text\" class=\"form-control profession-search-input\" placeholder=\"Search or Add Profession\"\r\n        [(ngModel)]=\"professionSearchQry\" name=\"professionSearchQry\"\r\n        (keydown.enter)=\"createManualProfessionRow()\" />\r\n    </div>\r\n\r\n    <div class=\"bg-white border rounded shadow-sm profession-accordion\">\r\n      <div class=\"profession-acc-columns\">\r\n        <span></span>\r\n        <span>Profession Name</span>\r\n        <span>Group</span>\r\n        <span>Type</span>\r\n        <span></span>\r\n      </div>\r\n\r\n      <ng-container *ngFor=\"let p of filteredProfessionTypes; trackBy: trackByProfessionId\">\r\n        <div class=\"profession-acc-item\" [class.profession-row-selected]=\"getProfessionSelection(p.id).selected\">\r\n          <div class=\"profession-acc-header\" (click)=\"toggleProfessionRow(p, $event)\">\r\n            <div class=\"text-center profession-acc-checkbox\" (click)=\"$event.stopPropagation()\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"getProfessionSelection(p.id).selected\"\r\n                (change)=\"onProfessionRowCheck(p, $event)\" />\r\n            </div>\r\n            <div class=\"profession-acc-name\">\r\n              {{ p.professionName }}\r\n              <span *ngIf=\"isProfessionSaved(p.id)\" class=\"badge border bg-success-subtle text-success ms-1\">Saved</span>\r\n            </div>\r\n            <div class=\"profession-acc-group\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else groupText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionGroupOptions\" [ngModel]=\"p.professionGroup\"\r\n                  (ngModelChange)=\"setManualProfessionGroup(p, $event)\" [name]=\"'manualGroup-' + p.id\"\r\n                  placeholder=\"Select group\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #groupText>{{ p.professionGroup || '\u2013' }}</ng-template>\r\n            </div>\r\n            <div class=\"profession-acc-type\"\r\n              (mousedown)=\"p.isManual && $event.stopPropagation()\" (click)=\"p.isManual && $event.stopPropagation()\">\r\n              <ng-container *ngIf=\"p.isManual; else typeText\">\r\n                <ng-select class=\"profession-inline-select\" [items]=\"professionTypeOptions\" [ngModel]=\"p.residentialCommercial\"\r\n                  (ngModelChange)=\"setManualProfessionType(p, $event)\" [name]=\"'manualType-' + p.id\"\r\n                  placeholder=\"Select type\" [clearable]=\"false\">\r\n                </ng-select>\r\n              </ng-container>\r\n              <ng-template #typeText>{{ p.residentialCommercial || '\u2013' }}</ng-template>\r\n            </div>\r\n            <button type=\"button\" class=\"profession-acc-chevron-btn\"\r\n              (click)=\"toggleProfessionRow(p)\"\r\n              [attr.aria-label]=\"getProfessionSelection(p.id).selected ? 'Collapse' : 'Expand'\">\r\n              <svg class=\"profession-acc-chevron\" [class.profession-acc-chevron--open]=\"getProfessionSelection(p.id).selected\"\r\n                width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"6 9 12 15 18 9\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n\r\n          <div class=\"profession-acc-body\" *ngIf=\"getProfessionSelection(p.id).selected\">\r\n            <div class=\"profession-acc-panel\">\r\n              <div *ngIf=\"p.isManual && !isManualRowReady(p.id)\" class=\"small text-danger mb-3 text-end\">\r\n                Select a Group and Type above to enable saving this profession.\r\n              </div>\r\n              <div class=\"profession-acc-fields\">\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self Ability Rating</label>\r\n                  <div class=\"profession-acc-stars\">\r\n                    <span *ngFor=\"let s of [1,2,3,4,5]\" class=\"fs-5\" style=\"cursor: pointer;\"\r\n                      (click)=\"setProfessionRowStars(p, s)\"\r\n                      [class.text-warning]=\"(getProfessionSelection(p.id).starRating || 0) / 2 >= s\"\r\n                      [class.text-muted]=\"(getProfessionSelection(p.id).starRating || 0) / 2 < s\">\u2605</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field\">\r\n                  <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <input type=\"number\" class=\"form-control form-control-sm profession-acc-year-input\" min=\"0\" max=\"30\"\r\n                      [(ngModel)]=\"getProfessionSelection(p.id).year\" [name]=\"'profYear-' + p.id\" />\r\n                    <span class=\"small text-muted\">Yrs</span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--visibility\">\r\n                  <label class=\"small text-muted d-block mb-1\">Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [(ngModel)]=\"getProfessionSelection(p.id).profileVisibility\"\r\n                    [name]=\"'profVis-' + p.id\" />\r\n                </div>\r\n                <div class=\"profession-acc-field profession-acc-field--notes\">\r\n                  <label class=\"small text-muted d-block mb-1\">Additional Details</label>\r\n                  <textarea rows=\"3\" class=\"form-control form-control-sm profession-notes-input\" [(ngModel)]=\"getProfessionSelection(p.id).notes\"\r\n                    [name]=\"'profNotes-' + p.id\" placeholder=\"Add details here\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"hasNoProfessionMatches\" class=\"text-center small py-3\">\r\n        <span class=\"text-muted\">No professions found for \"{{ professionSearchQry?.trim() }}\".</span>\r\n        <button type=\"button\" class=\"btn btn-sm btn-primary ms-2\" (click)=\"createManualProfessionRow()\">\r\n          Add \"{{ professionSearchQry?.trim() }}\"\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"!professionSearchQry?.trim() && filteredProfessionTypes.length === 0\"\r\n        class=\"text-center text-muted small py-3\">\r\n        No professions found.\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || !workSectionHasUnsavedItems() || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\" role=\"button\"\r\n      (click)=\"addJob()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush  rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel mb-2\">\r\n        <form class=\"row g-2 work-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n          </div>\r\n          <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n            <div class=\"form-check d-flex align-items-center\">\r\n              <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n              <label class=\"form-check-label ps-2 mb-0\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              name=\"newEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n              required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n            <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newWorkAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeJobFile(); newWorkAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n                formatMonthYear(job.endDate) }}</span>\r\n              <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n              title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n              [disabled]=\"deletingJobIndex() === i\" title=\"Delete\">\r\n              <span *ngIf=\"deletingJobIndex() === i\" class=\"spinner-border spinner-border-sm\"></span>\r\n              <img *ngIf=\"deletingJobIndex() !== i\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <div class=\"mt-3  p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"tempJobIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ tempJobIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2 work-editor-row\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Company <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n                <div class=\"form-check d-flex align-items-center\">\r\n                  <input class=\"form-check-input mt-0\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n                  <label class=\"form-check-label ps-2 mb-0\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.state)\">State is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n                  name=\"endDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\"\r\n                  *ngIf=\"workShowFieldErrors && !tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Responsibilities (one per line)</label>\r\n                <textarea rows=\"6\" class=\"form-control form-control-sm responsibilities-textarea\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Certification File</label>\r\n                <input #workAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n                <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"removeJobFile(); workAttachmentInput.value=''\" title=\"Remove file\">\r\n                    <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4 \" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || !certificationSectionHasUnsavedItems() || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addCertification()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 certification-editor-row\">\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Profession Type</label>\r\n            <div class=\"d-flex align-items-start gap-2\">\r\n              <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                name=\"newCertProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n              </ng-select>\r\n              <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certification Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Certification File</label>\r\n            <input #newCertAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeCertificationFile(); newCertAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\"\r\n            [disabled]=\"isSavingCertification\"\r\n            (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n                (click)=\"deleteCertification(ci)\" [disabled]=\"deletingCertificationIndex() === ci\" title=\"Delete\">\r\n                <span *ngIf=\"deletingCertificationIndex() === ci\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingCertificationIndex() !== ci\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"tempCertificationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempCertificationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 certification-editor-row\">\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Profession Type</label>\r\n              <div class=\"d-flex align-items-start gap-2\">\r\n                <ng-select class=\"flex-grow-1 certification-profession-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                  [ngModel]=\"tempCertification()?.professionId\" (change)=\"onCertificationProfessionChange($event)\"\r\n                  name=\"certProfessionType{{ ci }}\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                </ng-select>\r\n                <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                  (click)=\"openCustomProfessionForm('certificate')\">+</button>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"certificationShowFieldErrors && isBlank(tempCertification()?.name)\">Certificate name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Certification Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"certificationShowFieldErrors && isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Certification File</label>\r\n              <input #certAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeCertificationFile(); certAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n              (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || !licenseSectionHasUnsavedItems() || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addLicense()\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2 license-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Issued By</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issued State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">License File</label>\r\n            <input #newLicenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeLicenseFile(); newLicenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n            (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</span>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n                [disabled]=\"deletingLicenseIndex() === li\" title=\"Delete\">\r\n                <span *ngIf=\"deletingLicenseIndex() === li\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingLicenseIndex() !== li\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"tempLicenseIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempLicenseIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 license-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"licenseShowFieldErrors && isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Issued By</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issued State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"licenseShowFieldErrors && isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">License File</label>\r\n              <input #licenseAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeLicenseFile(); licenseAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n              (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n      <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n          [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || !toolsSectionHasUnsavedItems() || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\"\r\n          class=\"btn btn-light border res-flex  d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n          <span class=\"fw-normal item-name-text\">{{ tool }}</span>\r\n          <span class=\"badge border ms-1\"\r\n            [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n          <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n            class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n            Missing info\r\n          </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\"\r\n          [disabled]=\"deletingToolIndex() === ti\">\r\n          <span *ngIf=\"deletingToolIndex() === ti\" class=\"spinner-border spinner-border-sm\"></span>\r\n          <span *ngIf=\"deletingToolIndex() !== ti\" class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeToolEditor()\">\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n            </div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolShowFieldErrors && toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Profession Type</label>\r\n                <div class=\"d-flex align-items-start gap-2\">\r\n                  <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                    [ngModel]=\"toolForm()?.professionId\" (change)=\"onToolProfessionChange($event)\"\r\n                    name=\"toolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                  </ng-select>\r\n                  <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                    (click)=\"openCustomProfessionForm('tool')\">+</button>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolShowFieldErrors && isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"rating-count text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? 0 : +$event })\" name=\"toolYear\" min=\"0\"\r\n                  max=\"30\" placeholder=\"Years of Experience\" />\r\n              </div>\r\n\r\n              <div class=\"col-md-4 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                  (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\" />\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n                  placeholder=\"Enter additional details (optional)\"></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\"\r\n              [disabled]=\"deletingToolIndex() === editingToolIndex()\">\r\n              <span *ngIf=\"deletingToolIndex() === editingToolIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n              <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || !skillsSectionHasUnsavedItems() || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\"\r\n            class=\"btn btn-light border  res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n            <span class=\"fw-normal item-name-text\">{{ skill }}</span>\r\n            <span class=\"badge border ms-1\"\r\n              [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\" [disabled]=\"deletingSkillIndex() === si\">\r\n            <span *ngIf=\"deletingSkillIndex() === si\" class=\"spinner-border spinner-border-sm\"></span>\r\n            <span *ngIf=\"deletingSkillIndex() !== si\" class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n      <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 9999999;\" (click)=\"closeSkillEditor()\">\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100 skill-tool-editor-card\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n                }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillShowFieldErrors && skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Profession Type</label>\r\n                  <div class=\"d-flex align-items-start gap-2\">\r\n                    <ng-select class=\"flex-grow-1 skill-tool-editor-select\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n                      [ngModel]=\"skillForm()?.professionId\" (change)=\"onSkillProfessionChange($event)\"\r\n                      name=\"skillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n                    </ng-select>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n                      (click)=\"openCustomProfessionForm('skill')\">+</button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillShowFieldErrors && isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"rating-count text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience</label>\r\n                  <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? 0 : +$event })\" name=\"skillYear\" min=\"0\"\r\n                    max=\"30\" placeholder=\"Years of Experience\" />\r\n                </div>\r\n\r\n                <div class=\"col-md-4 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <input type=\"checkbox\" class=\"profession-visibility-checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\" id=\"skillVisible\" />\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea rows=\"6\" class=\"form-control responsibilities-textarea\" [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n                    placeholder=\"Enter additional details (optional)\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n                [disabled]=\"deletingSkillIndex() === editingSkillIndex()\">\r\n                <span *ngIf=\"deletingSkillIndex() === editingSkillIndex()\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n                <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n        <div class=\"d-flex align-items-center gap-2 section-header-title\">\r\n          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n            [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || !educationSectionHasUnsavedItems() || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n            <span class=\"fw-bold fs-5\">+</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\" role=\"button\" (click)=\"addEducation()\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\r\n        <form class=\"row g-2 education-editor-row\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n            <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Education File</label>\r\n            <input #newEducationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n            <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n              <span>{{ tempEducation()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"removeEducationFile(); newEducationAttachmentInput.value=''\" title=\"Remove file\">\r\n                <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n            (click)=\"saveEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n          </button>\r\n        </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <ng-container *ngIf=\"editingEducationIndex() !== ei; else editEdu\">\r\n          <div class=\"d-flex justify-content-between align-items-start\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n                <span class=\"badge border\"\r\n                  [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                  {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n                </span>\r\n              </div>\r\n              <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n              <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\r\n              <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n                [disabled]=\"deletingEducationIndex() === ei\" title=\"Delete\">\r\n                <span *ngIf=\"deletingEducationIndex() === ei\" class=\"spinner-border spinner-border-sm\"></span>\r\n                <img *ngIf=\"deletingEducationIndex() !== ei\" class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editEdu>\r\n          <div *ngIf=\"tempEducationIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ tempEducationIssues().join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2 education-editor-row\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Institution <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.institution)\">Institution name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Degree / Course Type <span class=\"text-danger\">*</span></label>\r\n              <ng-select class=\"ng-select-sm education-degree-type-select\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.state)\">State is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.city)\">City is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Start Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.startDate)\">Start date is required\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">End Date <span class=\"text-danger\">*</span></label>\r\n              <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"educationShowFieldErrors && isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"educationShowFieldErrors && isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Education File</label>\r\n              <input #educationAttachmentInput type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n              <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n                <span>{{ tempEducation()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"removeEducationFile(); educationAttachmentInput.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n              <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  </div>\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary preview-back-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" (click)=\"onBackClick()\">\r\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"me-1\" style=\"vertical-align:-0.1em\">\r\n        <path d=\"M11 3 5 8l6 5\" />\r\n      </svg> Back\r\n    </button>\r\n    <button class=\"btn btn-primary preview-dashboard-btn px-5 h-auto\" style=\"border-radius: 5px !important;\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n      (click)=\"onGoToDashboardClick()\">\r\n      <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showCustomProfessionForm\" style=\"z-index: 9999999;\">\r\n  <div class=\"confirm-modal-card add-profession-card\" style=\"max-width: 420px;\">\r\n    <h4 class=\"mb-1\">Add New Profession</h4>\r\n    <p class=\"text-muted small mb-4\">This profession isn't in the list yet. Add it here so you can link it to this\r\n      {{ customProfessionContextLabel }}.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Name <span class=\"text-danger\">*</span></label>\r\n      <input type=\"text\" class=\"form-control\" [(ngModel)]=\"customProfessionName\" name=\"customProfessionName\"\r\n        placeholder=\"Enter profession name\" />\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Group <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionGroupOptions\" [(ngModel)]=\"customProfessionGroup\" name=\"customProfessionGroup\"\r\n        placeholder=\"Select group\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Type <span class=\"text-danger\">*</span></label>\r\n      <ng-select class=\"add-profession-select\" [items]=\"professionTypeOptions\" [(ngModel)]=\"customProfessionType\" name=\"customProfessionType\"\r\n        placeholder=\"Select type\" [clearable]=\"false\" [appendTo]=\"'body'\">\r\n      </ng-select>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating</label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"setTempCustomProfessionStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n          <span [class]=\"customProfessionStars >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n            {{ customProfessionStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ customProfessionStars }}/5</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience</label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"customProfessionYear\" name=\"customProfessionYear\"\r\n        min=\"0\" max=\"30\" placeholder=\"Years of Experience\" />\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelCustomProfessionForm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"!canSaveCustomProfession || isSavingCustomProfession\"\r\n        (click)=\"saveCustomProfession()\">\r\n        <span *ngIf=\"isSavingCustomProfession\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingCustomProfession ? 'Saving...' : 'Add Profession' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkSkillProfessionId\" (change)=\"onBulkSkillProfessionChange($event)\"\r\n          name=\"bulkSkillProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-skill')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience (and optionally a profession type) to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Profession Type</label>\r\n      <div class=\"d-flex align-items-start gap-2\">\r\n        <ng-select class=\"flex-grow-1\" [items]=\"userProfessionOptions\" bindLabel=\"professionName\" bindValue=\"id\"\r\n          [ngModel]=\"bulkToolProfessionId\" (change)=\"onBulkToolProfessionChange($event)\"\r\n          name=\"bulkToolProfessionType\" placeholder=\"Select or search profession type\" [clearable]=\"true\">\r\n        </ng-select>\r\n        <button type=\"button\" class=\"btn btn-outline-primary btn-sm add-profession-plus-btn\" title=\"Add new profession\"\r\n          (click)=\"openCustomProfessionForm('bulk-tool')\">+</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb-3\">\r\n      <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"rating-count text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\"\r\n        [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n        <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{color:#69707d}.res-flex:hover,.res-flex:focus,.res-flex:active{transform:none!important;box-shadow:none!important}::ng-deep .profession-acc-checkbox .form-check-input{margin-left:unset!important}.profession-search-input{font-size:12px}.profession-search-input::placeholder{font-size:12px}.profession-row-selected{background-color:#f2f4fa}.profession-row-selected .profession-acc-header:hover{background-color:#eceffa}.profession-visibility-checkbox{all:revert;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;margin:4px auto 0!important;padding:0!important;position:static!important;float:none!important;vertical-align:middle!important;background-image:none!important;transform:none!important}.profession-accordion{font-size:12px;color:#69707d;max-height:480px;overflow-y:auto;margin-right:6px;position:relative;isolation:isolate;contain:paint}.profession-accordion label.small{font-size:12px;color:#69707d}.profession-acc-columns,.profession-acc-header{display:grid;grid-template-columns:36px 1fr 1fr 1fr 50px;align-items:center;gap:12px}.profession-acc-columns>*,.profession-acc-header>*{min-width:0}.profession-acc-columns{padding:12px 16px;border-bottom:1px solid #e9ecef;font-size:13px;font-weight:600;color:#69707d;text-transform:uppercase;position:sticky;top:0;z-index:2;background:#fff}@media (max-width: 767.98px){.profession-acc-columns{display:none}}.profession-acc-item{border-bottom:1px solid #f1f3f5}.profession-acc-item:last-child{border-bottom:none}.profession-acc-header{padding:12px 16px;cursor:pointer;transition:background-color .15s ease}.profession-acc-header .profession-acc-checkbox{display:flex;align-items:center;justify-content:center}.profession-acc-header .profession-acc-checkbox input[type=checkbox]{margin:0}.profession-acc-header:hover{background-color:#f8f9fb}.profession-acc-name{color:#69707d;display:flex;align-items:center;flex-wrap:wrap;gap:4px;overflow:hidden}.profession-acc-chevron-btn{background:transparent;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:#69707d}.profession-acc-chevron{transition:transform .2s ease}.profession-acc-chevron--open{transform:rotate(180deg)}.profession-acc-body{padding:0 16px 16px}.profession-acc-panel{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;padding:16px 20px}.profession-acc-fields{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}.profession-acc-field{min-width:100px}.profession-acc-field--visibility{display:flex;flex-direction:column;align-items:center;width:90px;flex-shrink:0}.profession-acc-field--visibility label{text-align:center;width:100%}.profession-acc-field--notes{flex:1 1 220px;margin:0}.profession-acc-stars{font-size:1.05rem;letter-spacing:2px}.profession-acc-year-input{width:72px}.profession-inline-select{min-width:160px;font-size:12px}.profession-inline-select ::ng-deep .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:32px!important;height:32px!important}::ng-deep .profession-inline-select .ng-option,::ng-deep .profession-inline-select .ng-placeholder{font-size:12px}.profession-notes-input{min-height:76px;resize:vertical;font-size:12px}.profession-notes-input::placeholder{font-size:12px}.responsibilities-textarea{min-height:130px;resize:vertical}@media (max-width: 767.98px){.profession-acc-header{grid-template-columns:24px 1fr 24px;grid-template-areas:\"checkbox name    chevron\" \"checkbox group   chevron\" \"checkbox type    chevron\";row-gap:4px}.profession-acc-checkbox{grid-area:checkbox}.profession-acc-name{grid-area:name}.profession-acc-group,.profession-acc-type{font-size:12px;color:#69707d}.profession-acc-group{grid-area:group}.profession-acc-group:before{content:\"Group: \";font-weight:600}.profession-acc-type{grid-area:type}.profession-acc-type:before{content:\"Type: \";font-weight:600}.profession-acc-chevron-btn{grid-area:chevron}.profession-acc-fields{gap:16px}}.container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#69707d}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-size:18px;font-weight:700;color:#69707d;margin:0}.preview-subtitle{margin-top:7px;font-size:14px;color:#69707d}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:5px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:12px;color:#69707d}.extra-small{font-size:.8rem}.card{transition:box-shadow .2s ease}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px)}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:background-color .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;max-width:calc(100vw - 32px);background:#fff;border-radius:10px;padding:16px}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.add-profession-plus-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;min-width:31px;width:31px;height:31px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border:1px solid #dc3545;color:#dc3545;border-radius:5px!important}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:5px!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:5px!important;background:transparent!important;border:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.remove-file-icon{width:16px;height:16px;object-fit:contain;cursor:pointer;vertical-align:middle;filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-size:14px;font-weight:600;color:#69707d}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);max-height:85vh;overflow-y:auto;background:#fff;border-radius:5px;border:1px solid #e5e7eb;padding:24px}.confirm-modal-card h4{font-size:20px}.confirm-modal-card .btn{font-size:14px}.confirm-modal-card .form-control,.confirm-modal-card .form-select{font-size:12px}.year-experience-select{max-height:150px}::ng-deep .ng-dropdown-panel{min-width:180px;z-index:2147483647!important;border-radius:6px!important;overflow:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom,::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:6px!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:220px;overflow-y:auto}@media screen and (max-width: 768px){.res-flex{flex-wrap:wrap!important;justify-content:center!important}.res-flex .fw-normal{width:100%;text-align:center;font-size:14px!important}.d-flex.flex-wrap.gap-2.p-3.bg-white.border.rounded.shadow-sm{justify-content:center}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:53%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:5px;background:#4077ad;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9;filter:invert(47%) sepia(8%) saturate(483%) hue-rotate(176deg) brightness(91%) contrast(87%)}.section-header-title h5.fw-bold{color:#69707d}.text-muted{color:#69707d!important;font-size:12px}h6.text-uppercase.fw-bold.text-muted{font-size:14px;color:#69707d!important}.company-detail-label{font-size:14px;font-weight:700;text-transform:uppercase;color:#69707d!important}.work-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-radius:5px!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-radius:5px!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-radius:5px!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:14px;font-weight:700;color:#69707d;margin-bottom:3px;display:block}.item-name-text,.field-value-sm{font-size:12px;color:#69707d}.item-title-sm{font-size:14px;color:#69707d!important}.item-meta-line{display:block;font-size:12px;color:#69707d;margin-top:3px}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:5px;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:14px}.empty-state-wrap:hover{background:#f0f6ff;border-color:#4077ad}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:5px;font-size:12px}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#fff,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:5px 5px 0 0}.profile-header-card{border:1px solid #e2e8f0!important}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.provider-layout{display:flex;flex-direction:column}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important;padding:.375rem .75rem;line-height:1.5}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important;border-radius:5px!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.preview-back-btn{background-color:#426c85!important;border-color:#426c85!important;color:#fff!important}.preview-dashboard-btn{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:transparent!important;border-color:#198754!important;color:#198754!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important;border-radius:5px!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px;padding:.375rem .75rem;line-height:1.5}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn{border-radius:5px!important;box-shadow:none!important;font-size:14px}.rating-count{font-size:14px}.card-footer.bg-white .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}.skill-tool-editor-card label,.skill-tool-editor-card .form-control,.skill-tool-editor-card .form-select{font-size:12px}.skill-tool-editor-card .form-control::placeholder{font-size:12px}.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-select-container,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-placeholder,.skill-tool-editor-card ::ng-deep .skill-tool-editor-select .ng-value-label{font-size:12px}.skill-tool-editor-card .form-control:not(textarea){height:32px!important}::ng-deep .skill-tool-editor-select .ng-option,::ng-deep .skill-tool-editor-select .ng-placeholder{font-size:12px}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#4077ad!important;border-color:#e0edf2!important}.work-editor-row label,.work-editor-row .form-control{font-size:12px}.work-editor-row .form-control::placeholder{font-size:12px}.education-editor-row label,.education-editor-row .form-control{font-size:12px}.education-editor-row .form-control::placeholder{font-size:12px}::ng-deep .education-degree-type-select .ng-select-container,::ng-deep .education-degree-type-select .ng-placeholder,::ng-deep .education-degree-type-select .ng-value-label,::ng-deep .education-degree-type-select .ng-option{font-size:12px}.license-editor-row label,.license-editor-row .form-control{font-size:12px}.license-editor-row .form-control::placeholder{font-size:12px}.certification-editor-row label,.certification-editor-row .form-control{font-size:12px}.certification-editor-row .form-control::placeholder{font-size:12px}::ng-deep .certification-profession-select .ng-select-container,::ng-deep .certification-profession-select .ng-placeholder,::ng-deep .certification-profession-select .ng-value-label,::ng-deep .certification-profession-select .ng-option{font-size:12px}.update-profile-card label,.update-profile-card .form-control,.update-profile-card .form-select{font-size:12px}.update-profile-card .form-control::placeholder{font-size:12px}.update-profile-card ::ng-deep im-address-verify-field .form-control{font-size:12px}.update-profile-card textarea.form-control{min-height:110px;resize:vertical}.add-profession-card label,.add-profession-card .form-control{font-size:12px}.add-profession-card .form-control::placeholder{font-size:12px}.add-profession-card .btn{font-size:14px}.add-profession-card ::ng-deep .add-profession-select .ng-select-container,.add-profession-card ::ng-deep .add-profession-select .ng-placeholder,.add-profession-card ::ng-deep .add-profession-select .ng-value-label{font-size:12px}::ng-deep .add-profession-select .ng-option,::ng-deep .add-profession-select .ng-placeholder{font-size:12px}label{margin-bottom:10px}\n"] }]
+        }], ctorParameters: () => [{ type: CredentialingStore }, { type: FileService }, { type: UserSkillSetService }, { type: UserToolService }, { type: ProfessionService }, { type: UserProfessionService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i1$3.TokenService }, { type: i1$3.RoleContextService }, { type: ProvidersService }, { type: FrontEndProvidersService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
                 }] }], propDecorators: { providerId: [{
@@ -12822,13 +12847,13 @@ class RoleSelectComponent {
     back() {
         this.store.previousStep();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: ProvidersService$1 }, { token: UserService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: i1$3.TokenService }, { token: i1$3.RoleContextService }, { token: FrontEndProvidersService }, { token: i7.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: ProvidersService }, { token: UserService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: i1$3.TokenService }, { token: i1$3.RoleContextService }, { token: FrontEndProvidersService }, { token: i7.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent", providerSaved: "providerSaved" }, ngImport: i0, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <ng-select class=\"w-100 custom-ng-select industry-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeUserImage(); uploadFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"companyAddress1\" placeholder=\"Home Address 1\"\r\n              [options]=\"options\" [invalid]=\"c.address1.invalid && (c.address1.touched || c.address1.dirty)\"\r\n              [initialLat]=\"c.latitude.value\" [initialLng]=\"c.longitude.value\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <div class=\"d-flex align-items-center gap-2\" *ngIf=\"previewCompanyUrl\">\r\n                  <img [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoImage(); uploadFile.value=''\" title=\"Remove file\">\r\n                    <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <ng-select class=\"w-100 custom-ng-select industry-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeUserImage(); uploadFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.remove-file-icon{width:16px;height:16px;object-fit:contain;cursor:pointer;vertical-align:middle;filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#69707d}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:14px!important}::ng-deep .job-title-select.ng-select-multiple .ng-select-container{height:42px!important}::ng-deep .job-title-select.ng-select-multiple .ng-value-container{flex-wrap:nowrap!important;overflow:hidden!important}::ng-deep .industry-select.ng-select-multiple .ng-select-container{height:42px!important}::ng-deep .industry-select.ng-select-multiple .ng-value-container{flex-wrap:nowrap!important;overflow:hidden!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#69707d}.form-control.is-invalid{border-color:#ef4444}::ng-deep im-address-verify-field .im-avf__input{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease}::ng-deep im-address-verify-field .im-avf__input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}::ng-deep im-address-verify-field .im-avf__input.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#69707d;margin-bottom:20px}.role-selection-container .note-label{font-size:13px;font-weight:700;color:#69707d;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#69707d;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: AddressVerifyFieldComponent, selector: "im-address-verify-field", inputs: ["placeholder", "options", "maxLength", "inputId", "name", "autocompleteAttr", "inputClass", "invalid", "inputStyle", "initialLat", "initialLng"], outputs: ["addressResolved", "manualEdit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <ng-select class=\"w-100 custom-ng-select industry-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeUserImage(); uploadFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event, 'company')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.pattern\">\r\n                Company Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"companyAddress1\" placeholder=\"Home Address 1\"\r\n              [options]=\"options\" [invalid]=\"c.address1.invalid && (c.address1.touched || c.address1.dirty)\"\r\n              [initialLat]=\"c.latitude.value\" [initialLng]=\"c.longitude.value\"\r\n              (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n              (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n              <img *ngIf=\"!isLogoLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <div class=\"d-flex align-items-center gap-2\" *ngIf=\"previewCompanyUrl\">\r\n                  <img [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeCompanyLogoImage(); uploadFile.value=''\" title=\"Remove file\">\r\n                    <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [name]=\"'random-address-' + randomId\"\r\n              autocompleteAttr=\"new-address-view\" placeholder=\"Home Address 1\" [options]=\"options\"\r\n              [invalid]=\"u.address1.invalid && (u.address1.touched || u.address1.dirty)\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event, 'user')\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.pattern\">\r\n                Phone Number must be 10 digits\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100 custom-ng-select job-title-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n            <img *ngIf=\"!isImageLoading\" src=\"/assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n            <ng-select class=\"w-100 custom-ng-select industry-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <div class=\"d-flex align-items-center gap-2\" *ngIf=\"previewUrl\">\r\n                <img [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"removeUserImage(); uploadFile.value=''\" title=\"Remove file\">\r\n                  <img src=\"/assets/images/icons/delete.png\" class=\"remove-file-icon\" alt=\"Remove\" />\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.remove-file-icon{width:16px;height:16px;object-fit:contain;cursor:pointer;vertical-align:middle;filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#69707d}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#69707d}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:14px!important}::ng-deep .job-title-select.ng-select-multiple .ng-select-container{height:42px!important}::ng-deep .job-title-select.ng-select-multiple .ng-value-container{flex-wrap:nowrap!important;overflow:hidden!important}::ng-deep .industry-select.ng-select-multiple .ng-select-container{height:42px!important}::ng-deep .industry-select.ng-select-multiple .ng-value-container{flex-wrap:nowrap!important;overflow:hidden!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#69707d}.form-control.is-invalid{border-color:#ef4444}::ng-deep im-address-verify-field .im-avf__input{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease}::ng-deep im-address-verify-field .im-avf__input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}::ng-deep im-address-verify-field .im-avf__input.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#69707d;margin-bottom:20px}.role-selection-container .note-label{font-size:13px;font-weight:700;color:#69707d;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#69707d;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#69707d;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#69707d;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#69707d;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:5px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.secondary{background:#69707d;color:#fff;border:1.5px solid #69707D}button.secondary:hover{border-color:#565c66;color:#fff;background:#565c66}.right-actions button.secondary{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.right-actions button.secondary:hover{border-color:#e4e8f2;color:#69707d;background:#e4e8f2}button:disabled{background:#69707d;cursor:not-allowed;transform:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button,.resume-wrapper{width:100%}.role-selection-container .navigation-buttons,.producer-type-container .navigation-buttons{margin-top:24px;margin-bottom:16px}}\n"] }]
-        }], ctorParameters: () => [{ type: CredentialingStore }, { type: ProvidersService$1 }, { type: UserService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: i1$3.TokenService }, { type: i1$3.RoleContextService }, { type: FrontEndProvidersService }, { type: i7.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { backToParent: [{
+        }], ctorParameters: () => [{ type: CredentialingStore }, { type: ProvidersService }, { type: UserService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: i1$3.TokenService }, { type: i1$3.RoleContextService }, { type: FrontEndProvidersService }, { type: i7.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { backToParent: [{
                 type: Output
             }], providerSaved: [{
                 type: Output
@@ -38330,13 +38355,13 @@ A B2B Corporate Client may use the platform for its own business operations or t
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: i2.ActivatedRoute }, { token: UserDetailService }, { token: i7.FormBuilder }, { token: FileService }, { token: ProvidersService$1 }, { token: RolesService }, { token: i1$1.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i1$3.TokenService }, { token: i1$3.RoleContextService }, { token: i1$3.AuthLogoutService }, { token: CredentialingStore }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: i2.ActivatedRoute }, { token: UserDetailService }, { token: i7.FormBuilder }, { token: FileService }, { token: ProvidersService }, { token: RolesService }, { token: i1$1.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i1$3.TokenService }, { token: i1$3.RoleContextService }, { token: i1$3.AuthLogoutService }, { token: CredentialingStore }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", inputs: { providerName: "providerName" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n  <div *ngIf=\"isInitializing\" class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n  </div>\r\n  <ng-container *ngIf=\"!isInitializing\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <button class=\"logout-btn\" (click)=\"logout()\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n        <polyline points=\"16 17 21 12 16 7\"/>\r\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n      </svg>\r\n      Logout\r\n    </button>\r\n  </div>\r\n  <div class=\"card p-0 pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <div [hidden]=\"view !== 1\">\r\n\r\n      <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n      <div class=\"v1-welcome\">\r\n        <div class=\"v1-welcome-icon\">\r\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n            <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n            <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"v1-welcome-text\">\r\n          <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n          <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n            you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n            photos and logos professional, and schedule up to date.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n      <div class=\"v1-body\">\r\n\r\n        <!-- Left: agreement cards -->\r\n        <div class=\"v1-agreements\">\r\n\r\n          <!-- Terms card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n                <polyline points=\"14 2 14 8 20 8\"/>\r\n                <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n                <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Terms and Conditions</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n              [disabled]=\"isTermsLoading\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              <span class=\"v1-agree-spinner\" *ngIf=\"isTermsLoading\"></span>\r\n              <svg *ngIf=\"!isTermsLoading && model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ isTermsLoading ? 'Loading...' : (model.acceptTerms ? 'Agreed' : 'Read & Agree') }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Privacy card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n            [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Privacy Statement</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n              [disabled]=\"isPrivacyLoading\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              <span class=\"v1-agree-spinner\" *ngIf=\"isPrivacyLoading\"></span>\r\n              <svg *ngIf=\"!isPrivacyLoading && model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ isPrivacyLoading ? 'Loading...' : (model.privacy ? 'Agreed' : 'Read & Agree') }}\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Right: signature pad -->\r\n        <div class=\"v1-signature\">\r\n          <div class=\"v1-sig-header\">\r\n            <span class=\"v1-sig-label\">\r\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n              </svg>\r\n              Signature\r\n            </span>\r\n            <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n              Clear\r\n            </button>\r\n          </div>\r\n          <div class=\"v1-sig-pad\">\r\n            <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n              <canvas #canvas></canvas>\r\n            </div>\r\n            <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n              <img [src]=\"signaturePadData?.publicUrl\" alt style=\"width:100%;height:120px;object-fit:contain;display:block;\">\r\n            </div>\r\n            <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n              Draw your signature here\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n            class=\"v1-error-msg\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n            </svg>\r\n            Signature is required\r\n          </div>\r\n          <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n      <div class=\"v1-footer\">\r\n        <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n          [disabled]=\"((!points || !points?.length || points.length==0) && !fileData && !signaturePadData?.publicUrl) || !model.acceptTerms || !model.privacy\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"view == 2\">\r\n\r\n      <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n      <div class=\"v2-header\">\r\n        <div class=\"v2-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"v2-title\">Choose your role</h2>\r\n          <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n            collaborations. Connect your business to others and prospective clients.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n      <div class=\"v2-grid\">\r\n        <ng-container *ngFor=\"let userType of userViewRoles\">\r\n          <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n            (click)=\"selectedUserRole(userType); toggleTooltip($event, userType)\">\r\n            <button type=\"button\" class=\"v2-role-info-btn\" *ngIf=\"userType.details\"\r\n              (click)=\"openInfoPopup($event, userType)\" title=\"More info\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\r\n              </svg>\r\n            </button>\r\n            <div class=\"v2-role-img-wrap\">\r\n              <img [src]=\"userType?.img\" alt=\"\">\r\n            </div>\r\n            <span class=\"v2-role-name\">{{userType.name}}</span>\r\n            <span class=\"v2-role-subtitle\" *ngIf=\"userType.subtitle\">{{userType.subtitle}}</span>\r\n            <div class=\"v2-role-tooltip\" *ngIf=\"userType.tooltip\">{{userType.tooltip}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role tooltip (mobile: centered overlay) \u2500\u2500 -->\r\n      <div class=\"v2-tooltip-overlay\" *ngIf=\"activeTooltipRole?.tooltip\" (click)=\"closeTooltip()\">\r\n        <div class=\"v2-tooltip-popup\" (click)=\"$event.stopPropagation()\">\r\n          {{ activeTooltipRole.tooltip }}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role info popup \u2500\u2500 -->\r\n      <div class=\"v2-info-overlay\" *ngIf=\"infoPopupRole\" (click)=\"closeInfoPopup()\">\r\n        <div class=\"v2-info-popup\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"v2-info-popup-header\">\r\n            <span class=\"v2-info-popup-title\">{{ infoPopupRole.name }}</span>\r\n            <button type=\"button\" class=\"v2-info-popup-close\" (click)=\"closeInfoPopup()\">\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <div class=\"v2-info-popup-body\">{{ infoPopupRole.details }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n      <div class=\"v2-footer\">\r\n        <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n          <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n          <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n            Continue\r\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n            </svg>\r\n          </ng-container>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n            <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Business Information</h2>\r\n          <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"companyForm\">\r\n\r\n        <!-- Company Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Company Details</p>\r\n          <div class=\"ip-grid-2\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n                type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n                formControlName=\"companyName\">\r\n              <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n                <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n                <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n              </span>\r\n              <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n                id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                (input)=\"formatPhone($event,companyForm)\"\r\n                [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n              <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Address</p>\r\n          <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n              <im-address-verify-field formControlName=\"address1\" inputId=\"businessAddress\" [options]=\"options\"\r\n                inputClass=\"\" [inputStyle]=\"addressInputStyle\" placeholder=\"Business Address 1\"\r\n                [invalid]=\"f.address1.errors && validatePage == 3\"\r\n                [initialLat]=\"f.latitude.value\" [initialLng]=\"f.longitude.value\"\r\n                (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n                (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n              <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n            </div>\r\n          </div>\r\n          <div class=\"ip-grid-4\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Company Logo (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Company Logo</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n              class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n            <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n              src=\"/assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <small class=\"ip-upload-hint text-muted d-block\">Allowed formats: PNG, JPG, JPEG</small>\r\n          <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n          <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contractor Category -->\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n        <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n        <div class=\"cc-select-wrap\">\r\n          <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n            (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n            >\r\n          </ng-select>\r\n        </div>\r\n\r\n        <!-- Sub-items as pill chips per selected category -->\r\n        <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n          <div class=\"cc-group\">\r\n\r\n            <!-- \"Select all\" toggle pill for this category -->\r\n            <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n              <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ item?.name }} \u2014 Select all\r\n            </label>\r\n\r\n            <!-- Individual sub-item pills -->\r\n            <div class=\"cc-sub-pills\">\r\n              <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n                [class.cc-sub-pill--on]=\"subItem.selected\">\r\n                <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                  (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n                <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                  stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"20 6 9 17 4 12\"/>\r\n                </svg>\r\n                {{ subItem?.name }}\r\n              </label>\r\n            </div>\r\n\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Your Profile</h2>\r\n          <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Copy from provider toggle -->\r\n      <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n        <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n          class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n        <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n      </div>\r\n\r\n      <form [formGroup]=\"userForm\">\r\n\r\n        <!-- Personal Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Personal Details</p>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n              <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n              <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n              <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Home Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Home Address</p>\r\n          <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n            <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [options]=\"options\"\r\n              inputClass=\"\" [inputStyle]=\"addressInputStyle\" placeholder=\"Home Address 1\"\r\n              [invalid]=\"u.address1.errors && validatePage == 4\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n              <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                placeholder=\"Home Address 2\">\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n                formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n              <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Profile Picture (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Profile Picture</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n              class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n            <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n              src=\"/assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <small class=\"ip-upload-hint text-muted d-block\">Allowed formats: PNG, JPG, JPEG</small>\r\n          <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n          <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <div class=\"v5-wrap\">\r\n\r\n        <!-- Success icon -->\r\n        <div class=\"v5-icon\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n          </svg>\r\n        </div>\r\n\r\n        <h2 class=\"v5-title\">You're all set!</h2>\r\n        <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n        <!-- Info cards -->\r\n        <div class=\"v5-cards\">\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n                <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n          </div>\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon v5-card-icon--green\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n          </div>\r\n        </div>\r\n\r\n        <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n          Go to Dashboard\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n    [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"tc-modal-header\">\r\n        \r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <span class=\"tc-modal-meta\" *ngIf=\"legalMeta\">Last Modified: {{ legalMeta.createdDate | date:'MMM d, y, h:mm:ss a' }}, {{ legalMeta.versionName }}</span>\r\n      </div>\r\n\r\n\r\n      <div class=\"tc-scroll-wrapper\">\r\n        <div class=\"tc-modal-body\"\r\n          (scroll)=\"onTermsScroll($event)\">\r\n          <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n            <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n              (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n            </app-terms-conditions>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n            <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n              (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n            </app-privacy-policy>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- Floating scroll-to-bottom button -->\r\n        <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled && legalMeta\" (click)=\"scrollToBottomClick($event)\"\r\n          title=\"Scroll to bottom\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- FOOTER -->\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n          (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n          Decline\r\n        </button>\r\n        <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n          [disabled]=\"!isAgreeEnabled\"\r\n          (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n          I Agree\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:40px}.container .card{border-radius:5px}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:10px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 28px 14px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;padding:10px;margin:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-modal-header .tc-modal-meta{font-weight:600;font-size:12px;color:#fff;flex-shrink:0;white-space:nowrap}@media screen and (max-width: 767px){.tc-modal-header .tc-modal-header{flex-flow:column;align-items:center;text-align:center}.tc-modal-header .tc-modal-title{flex:1 1 100%;white-space:normal}.tc-modal-header .tc-modal-meta{flex:1 1 100%;opacity:.85}}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:5px;border:none;cursor:pointer;transition:background .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#b43026;color:#fff;border:1.5px solid #B43026}.tc-btn.tc-btn-decline:hover{background:#96271f;border-color:#96271f;color:#fff}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);border:1.5px solid transparent;color:#fff}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cfd2d6;display:flex;align-items:center;justify-content:center;color:#90979d;margin-top:2px}.v1-welcome-title{font-size:18px;font-weight:700;color:#69707d;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:14px;color:#69707d;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#dde2e7}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:38px;height:38px;border-radius:5px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{border-color:#dde2e7;color:#7e8994}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:14px;font-weight:600;color:#69707d;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:12px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#3e7f50;border-color:#3e7f50;color:#fff}.v1-agree-btn:disabled{opacity:.7;cursor:not-allowed}.v1-agree-btn:disabled:hover{background:transparent;color:#4077ad}.v1-agree-spinner{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;flex-shrink:0;animation:v1-agree-spin .7s linear infinite}@keyframes v1-agree-spin{to{transform:rotate(360deg)}}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#69707d;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:5px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:5px;border:1.5px dashed #cbd5e1;overflow:hidden;min-height:120px}.v1-sig-pad canvas{display:block;cursor:crosshair;width:100%;height:120px}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:12px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;transition:transform .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:16px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cecece;display:flex;align-items:center;justify-content:center;color:#abb3ba;margin-top:2px}.v2-title{font-size:18px;font-weight:700;color:#69707d;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:14px;color:#69707d;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:10px 32px 50px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{z-index:30;border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:14px;font-weight:600;color:#69707d;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-subtitle{font-size:11px;font-weight:400;color:#6b7280;line-height:1.3;text-align:center;margin-top:2px}.v2-role-tooltip{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%) translateY(-4px);width:240px;max-width:80vw;background:#4077ad;color:#fff;font-size:12px;font-weight:400;line-height:1.45;text-align:left;padding:10px 12px;border-radius:6px;box-shadow:0 6px 18px #0000002e;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:40}.v2-role-tooltip:after{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:6px;border-style:solid;border-color:transparent transparent #4077ad transparent}.v2-role-card:hover .v2-role-tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}@media (max-width: 767px){.v2-role-tooltip{display:none}}.v2-tooltip-overlay{display:none}@media (max-width: 767px){.v2-tooltip-overlay{position:fixed;inset:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.v2-tooltip-popup{width:280px;max-width:85vw;background:#4077ad;color:#fff;font-size:13px;font-weight:400;line-height:1.5;text-align:left;padding:16px;border-radius:8px;box-shadow:0 12px 32px #00000040}}.v2-role-info-btn{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;transition:background .15s ease,transform .15s ease}.v2-role-info-btn:hover{background:#345f87;transform:scale(1.08)}.v2-info-overlay{position:fixed;inset:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:1000}.v2-info-popup{width:560px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 12px 32px #00000040}.v2-info-popup-header{display:flex;align-items:center;justify-content:space-between;background:#4077ad;padding:14px 16px}.v2-info-popup-title{color:#fff;font-size:15px;font-weight:600}.v2-info-popup-close{background:transparent;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px}.v2-info-popup-body{padding:16px;font-size:13px;line-height:1.6;color:#69707d;white-space:pre-line;overflow-y:auto}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.v2-back-btn:hover{color:#fff;background:#565c66;border-color:#565c66}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #c7c7c7;display:flex;align-items:center;justify-content:center;color:#959191;margin-top:2px}.ip-title{font-size:18px;font-weight:700;color:#69707d;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:14px;color:#69707d;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:5px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#69707d;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:5px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-upload-hint{margin-top:6px;font-size:12px}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:14px;font-weight:500;color:#69707d;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#fff;border-color:#565c66;background:#565c66}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px)}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:18px;font-weight:800;color:#69707d;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#69707d;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:14px;color:#69707d;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:5px;font-size:14px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px)}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:14px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#69707d}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#69707d;border-color:#69707d;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#69707d}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}html,body{overscroll-behavior:none;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: AddressVerifyFieldComponent, selector: "im-address-verify-field", inputs: ["placeholder", "options", "maxLength", "inputId", "name", "autocompleteAttr", "inputClass", "invalid", "inputStyle", "initialLat", "initialLng"], outputs: ["addressResolved", "manualEdit"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["signatureFileId", "signatureUrl", "data"], outputs: ["back"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n  <div *ngIf=\"isInitializing\" class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n  </div>\r\n  <ng-container *ngIf=\"!isInitializing\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <button class=\"logout-btn\" (click)=\"logout()\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n        <polyline points=\"16 17 21 12 16 7\"/>\r\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n      </svg>\r\n      Logout\r\n    </button>\r\n  </div>\r\n  <div class=\"card p-0 pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <div [hidden]=\"view !== 1\">\r\n\r\n      <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n      <div class=\"v1-welcome\">\r\n        <div class=\"v1-welcome-icon\">\r\n          <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n            <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n            <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"v1-welcome-text\">\r\n          <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n          <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n            you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n            photos and logos professional, and schedule up to date.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n      <div class=\"v1-body\">\r\n\r\n        <!-- Left: agreement cards -->\r\n        <div class=\"v1-agreements\">\r\n\r\n          <!-- Terms card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n            [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n                <polyline points=\"14 2 14 8 20 8\"/>\r\n                <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n                <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Terms and Conditions</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n              [disabled]=\"isTermsLoading\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              <span class=\"v1-agree-spinner\" *ngIf=\"isTermsLoading\"></span>\r\n              <svg *ngIf=\"!isTermsLoading && model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ isTermsLoading ? 'Loading...' : (model.acceptTerms ? 'Agreed' : 'Read & Agree') }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Privacy card -->\r\n          <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n            [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n            <div class=\"v1-card-icon\">\r\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n              </svg>\r\n            </div>\r\n            <div class=\"v1-card-body\">\r\n              <p class=\"v1-card-title\">Privacy Statement</p>\r\n              <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n            </div>\r\n            <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n              [disabled]=\"isPrivacyLoading\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              <span class=\"v1-agree-spinner\" *ngIf=\"isPrivacyLoading\"></span>\r\n              <svg *ngIf=\"!isPrivacyLoading && model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ isPrivacyLoading ? 'Loading...' : (model.privacy ? 'Agreed' : 'Read & Agree') }}\r\n            </button>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Right: signature pad -->\r\n        <div class=\"v1-signature\">\r\n          <div class=\"v1-sig-header\">\r\n            <span class=\"v1-sig-label\">\r\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n              </svg>\r\n              Signature\r\n            </span>\r\n            <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n              Clear\r\n            </button>\r\n          </div>\r\n          <div class=\"v1-sig-pad\">\r\n            <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n              <canvas #canvas></canvas>\r\n            </div>\r\n            <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n              <img [src]=\"signaturePadData?.publicUrl\" alt style=\"width:100%;height:120px;object-fit:contain;display:block;\">\r\n            </div>\r\n            <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n              Draw your signature here\r\n            </p>\r\n          </div>\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n            class=\"v1-error-msg\">\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n            </svg>\r\n            Signature is required\r\n          </div>\r\n          <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n      <div class=\"v1-footer\">\r\n        <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n          [disabled]=\"((!points || !points?.length || points.length==0) && !fileData && !signaturePadData?.publicUrl) || !model.acceptTerms || !model.privacy\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"view == 2\">\r\n\r\n      <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n      <div class=\"v2-header\">\r\n        <div class=\"v2-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"v2-title\">Choose your role</h2>\r\n          <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n            collaborations. Connect your business to others and prospective clients.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n      <div class=\"v2-grid\">\r\n        <ng-container *ngFor=\"let userType of userViewRoles\">\r\n          <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n            (click)=\"selectedUserRole(userType); toggleTooltip($event, userType)\">\r\n            <button type=\"button\" class=\"v2-role-info-btn\" *ngIf=\"userType.details\"\r\n              (click)=\"openInfoPopup($event, userType)\" title=\"More info\">\r\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\r\n              </svg>\r\n            </button>\r\n            <div class=\"v2-role-img-wrap\">\r\n              <img [src]=\"userType?.img\" alt=\"\">\r\n            </div>\r\n            <span class=\"v2-role-name\">{{userType.name}}</span>\r\n            <span class=\"v2-role-subtitle\" *ngIf=\"userType.subtitle\">{{userType.subtitle}}</span>\r\n            <div class=\"v2-role-tooltip\" *ngIf=\"userType.tooltip\">{{userType.tooltip}}</div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role tooltip (mobile: centered overlay) \u2500\u2500 -->\r\n      <div class=\"v2-tooltip-overlay\" *ngIf=\"activeTooltipRole?.tooltip\" (click)=\"closeTooltip()\">\r\n        <div class=\"v2-tooltip-popup\" (click)=\"$event.stopPropagation()\">\r\n          {{ activeTooltipRole.tooltip }}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Role info popup \u2500\u2500 -->\r\n      <div class=\"v2-info-overlay\" *ngIf=\"infoPopupRole\" (click)=\"closeInfoPopup()\">\r\n        <div class=\"v2-info-popup\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"v2-info-popup-header\">\r\n            <span class=\"v2-info-popup-title\">{{ infoPopupRole.name }}</span>\r\n            <button type=\"button\" class=\"v2-info-popup-close\" (click)=\"closeInfoPopup()\">\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          <div class=\"v2-info-popup-body\">{{ infoPopupRole.details }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n      <div class=\"v2-footer\">\r\n        <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n          <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n          <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n            Continue\r\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n            </svg>\r\n          </ng-container>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n            <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Business Information</h2>\r\n          <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <form [formGroup]=\"companyForm\">\r\n\r\n        <!-- Company Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Company Details</p>\r\n          <div class=\"ip-grid-2\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n                type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n                formControlName=\"companyName\">\r\n              <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n                <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n                <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n              </span>\r\n              <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n                id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                (input)=\"formatPhone($event,companyForm)\"\r\n                [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n              <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Address</p>\r\n          <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n              <im-address-verify-field formControlName=\"address1\" inputId=\"businessAddress\" [options]=\"options\"\r\n                inputClass=\"\" [inputStyle]=\"addressInputStyle\" placeholder=\"Business Address 1\"\r\n                [invalid]=\"f.address1.errors && validatePage == 3\"\r\n                [initialLat]=\"f.latitude.value\" [initialLng]=\"f.longitude.value\"\r\n                (addressResolved)=\"onCompanyAddressResolved($event)\"\r\n                (manualEdit)=\"onCompanyAddressManualEdit()\"></im-address-verify-field>\r\n              <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n            </div>\r\n          </div>\r\n          <div class=\"ip-grid-4\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n                <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Company Logo (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Company Logo</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n              class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n            <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n              src=\"/assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <small class=\"ip-upload-hint text-muted d-block\">Allowed formats: PNG, JPG, JPEG</small>\r\n          <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n          <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Contractor Category -->\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n        <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n        <div class=\"cc-select-wrap\">\r\n          <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n            (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n            >\r\n          </ng-select>\r\n        </div>\r\n\r\n        <!-- Sub-items as pill chips per selected category -->\r\n        <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n          <div class=\"cc-group\">\r\n\r\n            <!-- \"Select all\" toggle pill for this category -->\r\n            <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n              <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"20 6 9 17 4 12\"/>\r\n              </svg>\r\n              {{ item?.name }} \u2014 Select all\r\n            </label>\r\n\r\n            <!-- Individual sub-item pills -->\r\n            <div class=\"cc-sub-pills\">\r\n              <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n                [class.cc-sub-pill--on]=\"subItem.selected\">\r\n                <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                  (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n                <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                  stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"20 6 9 17 4 12\"/>\r\n                </svg>\r\n                {{ subItem?.name }}\r\n              </label>\r\n            </div>\r\n\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n          Continue\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <!-- Header -->\r\n      <div class=\"ip-header\">\r\n        <div class=\"ip-header-icon\">\r\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n            <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n          </svg>\r\n        </div>\r\n        <div>\r\n          <h2 class=\"ip-title\">Your Profile</h2>\r\n          <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Copy from provider toggle -->\r\n      <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n        <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n          class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n        <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n      </div>\r\n\r\n      <form [formGroup]=\"userForm\">\r\n\r\n        <!-- Personal Details -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Personal Details</p>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n              <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n              <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n              <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Home Address -->\r\n        <div class=\"ip-section\">\r\n          <p class=\"ip-section-label\">Home Address</p>\r\n          <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n            <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n            <im-address-verify-field formControlName=\"address1\" inputId=\"address1\" [options]=\"options\"\r\n              inputClass=\"\" [inputStyle]=\"addressInputStyle\" placeholder=\"Home Address 1\"\r\n              [invalid]=\"u.address1.errors && validatePage == 4\"\r\n              [initialLat]=\"u.latitude.value\" [initialLng]=\"u.longitude.value\"\r\n              (addressResolved)=\"onUserAddressResolved($event)\"\r\n              (manualEdit)=\"onUserAddressManualEdit()\"></im-address-verify-field>\r\n            <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n              <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"ip-grid-3\">\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n              <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                placeholder=\"Home Address 2\">\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n              <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n              <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n              <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n              <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n              <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n                type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n              <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n              </span>\r\n            </div>\r\n            <div class=\"ip-field\">\r\n              <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n              <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n                formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n                [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n              <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n                <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </form>\r\n\r\n      <!-- Profile Picture (intentionally outside formGroup) -->\r\n      <div class=\"ip-section\">\r\n        <p class=\"ip-section-label\">Profile Picture</p>\r\n        <div class=\"ip-field\">\r\n          <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n          <div class=\"ip-upload-wrap\">\r\n            <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n              class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n            <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n              src=\"/assets/images/icons/upload.svg\" alt=\"Upload\">\r\n          </div>\r\n          <small class=\"ip-upload-hint text-muted d-block\">Allowed formats: PNG, JPG, JPEG</small>\r\n          <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n          <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Footer -->\r\n      <div class=\"ip-footer\">\r\n        <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n          </svg>\r\n          Back\r\n        </button>\r\n        <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n          <span *ngIf=\"!showLoader\">Continue</span>\r\n          <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n          <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <div class=\"v5-wrap\">\r\n\r\n        <!-- Success icon -->\r\n        <div class=\"v5-icon\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n          </svg>\r\n        </div>\r\n\r\n        <h2 class=\"v5-title\">You're all set!</h2>\r\n        <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n        <!-- Info cards -->\r\n        <div class=\"v5-cards\">\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n                <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n                <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n          </div>\r\n          <div class=\"v5-card\">\r\n            <div class=\"v5-card-icon v5-card-icon--green\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n              </svg>\r\n            </div>\r\n            <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n          </div>\r\n        </div>\r\n\r\n        <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n          Go to Dashboard\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n          </svg>\r\n        </button>\r\n\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n    [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"tc-modal-header\">\r\n        \r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <span class=\"tc-modal-meta\" *ngIf=\"legalMeta\">Last Modified: {{ legalMeta.createdDate | date:'MMM d, y, h:mm:ss a' }}, {{ legalMeta.versionName }}</span>\r\n      </div>\r\n\r\n\r\n      <div class=\"tc-scroll-wrapper\">\r\n        <div class=\"tc-modal-body\"\r\n          (scroll)=\"onTermsScroll($event)\">\r\n          <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n            <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n              (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n            </app-terms-conditions>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n            <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n              (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n            </app-privacy-policy>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- Floating scroll-to-bottom button -->\r\n        <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled && legalMeta\" (click)=\"scrollToBottomClick($event)\"\r\n          title=\"Scroll to bottom\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- FOOTER -->\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n          (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n          Decline\r\n        </button>\r\n        <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n          [disabled]=\"!isAgreeEnabled\"\r\n          (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n          I Agree\r\n        </button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:40px}.container .card{border-radius:5px}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:10px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 28px 14px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;padding:10px;margin:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-modal-header .tc-modal-meta{font-weight:600;font-size:12px;color:#fff;flex-shrink:0;white-space:nowrap}@media screen and (max-width: 767px){.tc-modal-header .tc-modal-header{flex-flow:column;align-items:center;text-align:center}.tc-modal-header .tc-modal-title{flex:1 1 100%;white-space:normal}.tc-modal-header .tc-modal-meta{flex:1 1 100%;opacity:.85}}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:5px;border:none;cursor:pointer;transition:background .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#b43026;color:#fff;border:1.5px solid #B43026}.tc-btn.tc-btn-decline:hover{background:#96271f;border-color:#96271f;color:#fff}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);border:1.5px solid transparent;color:#fff}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cfd2d6;display:flex;align-items:center;justify-content:center;color:#90979d;margin-top:2px}.v1-welcome-title{font-size:18px;font-weight:700;color:#69707d;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:14px;color:#69707d;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#dde2e7}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:38px;height:38px;border-radius:5px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{border-color:#dde2e7;color:#7e8994}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:14px;font-weight:600;color:#69707d;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:12px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#3e7f50;border-color:#3e7f50;color:#fff}.v1-agree-btn:disabled{opacity:.7;cursor:not-allowed}.v1-agree-btn:disabled:hover{background:transparent;color:#4077ad}.v1-agree-spinner{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;flex-shrink:0;animation:v1-agree-spin .7s linear infinite}@keyframes v1-agree-spin{to{transform:rotate(360deg)}}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#69707d;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:5px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:5px;border:1.5px dashed #cbd5e1;overflow:hidden;min-height:120px}.v1-sig-pad canvas{display:block;cursor:crosshair;width:100%;height:120px}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:12px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;transition:transform .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:16px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cecece;display:flex;align-items:center;justify-content:center;color:#abb3ba;margin-top:2px}.v2-title{font-size:18px;font-weight:700;color:#69707d;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:14px;color:#69707d;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:10px 32px 50px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{z-index:30;border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:14px;font-weight:600;color:#69707d;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-subtitle{font-size:11px;font-weight:400;color:#6b7280;line-height:1.3;text-align:center;margin-top:2px}.v2-role-tooltip{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%) translateY(-4px);width:240px;max-width:80vw;background:#4077ad;color:#fff;font-size:12px;font-weight:400;line-height:1.45;text-align:left;padding:10px 12px;border-radius:6px;box-shadow:0 6px 18px #0000002e;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:40}.v2-role-tooltip:after{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:6px;border-style:solid;border-color:transparent transparent #4077ad transparent}.v2-role-card:hover .v2-role-tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}@media (max-width: 767px){.v2-role-tooltip{display:none}}.v2-tooltip-overlay{display:none}@media (max-width: 767px){.v2-tooltip-overlay{position:fixed;inset:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.v2-tooltip-popup{width:280px;max-width:85vw;background:#4077ad;color:#fff;font-size:13px;font-weight:400;line-height:1.5;text-align:left;padding:16px;border-radius:8px;box-shadow:0 12px 32px #00000040}}.v2-role-info-btn{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;transition:background .15s ease,transform .15s ease}.v2-role-info-btn:hover{background:#345f87;transform:scale(1.08)}.v2-info-overlay{position:fixed;inset:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:1000}.v2-info-popup{width:560px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 12px 32px #00000040}.v2-info-popup-header{display:flex;align-items:center;justify-content:space-between;background:#4077ad;padding:14px 16px}.v2-info-popup-title{color:#fff;font-size:15px;font-weight:600}.v2-info-popup-close{background:transparent;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px}.v2-info-popup-body{padding:16px;font-size:13px;line-height:1.6;color:#69707d;white-space:pre-line;overflow-y:auto}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.v2-back-btn:hover{color:#fff;background:#565c66;border-color:#565c66}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #c7c7c7;display:flex;align-items:center;justify-content:center;color:#959191;margin-top:2px}.ip-title{font-size:18px;font-weight:700;color:#69707d;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:14px;color:#69707d;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:5px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#69707d;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:5px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-upload-hint{margin-top:6px;font-size:12px}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:14px;font-weight:500;color:#69707d;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#fff;border-color:#565c66;background:#565c66}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px)}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:18px;font-weight:800;color:#69707d;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#69707d;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:14px;color:#69707d;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:5px;font-size:14px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px)}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:14px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#69707d}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#69707d;border-color:#69707d;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#69707d;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#69707d}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}html,body{overscroll-behavior:none;height:100%;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i2.Router }, { type: i2.ActivatedRoute }, { type: UserDetailService }, { type: i7.FormBuilder }, { type: FileService }, { type: ProvidersService$1 }, { type: RolesService }, { type: i1$1.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i1$3.TokenService }, { type: i1$3.RoleContextService }, { type: i1$3.AuthLogoutService }, { type: CredentialingStore }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2.Router }, { type: i2.ActivatedRoute }, { type: UserDetailService }, { type: i7.FormBuilder }, { type: FileService }, { type: ProvidersService }, { type: RolesService }, { type: i1$1.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i1$3.TokenService }, { type: i1$3.RoleContextService }, { type: i1$3.AuthLogoutService }, { type: CredentialingStore }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
                 }] }], propDecorators: { providerName: [{
@@ -38648,13 +38673,13 @@ class ClaimProcessService {
         }
         return payload;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, deps: [{ token: UserDetailService }, { token: RolesService }, { token: ProvidersService$1 }, { token: FrontEndProvidersService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, deps: [{ token: UserDetailService }, { token: RolesService }, { token: ProvidersService }, { token: FrontEndProvidersService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: UserDetailService }, { type: RolesService }, { type: ProvidersService$1 }, { type: FrontEndProvidersService }, { type: FileService }] });
+        }], ctorParameters: () => [{ type: UserDetailService }, { type: RolesService }, { type: ProvidersService }, { type: FrontEndProvidersService }, { type: FileService }] });
 
 function passwordMatchValidator(control) {
     const pw = control.get('password');
@@ -39652,11 +39677,11 @@ class ClaimProcessComponent {
     }
     ngOnDestroy() { this.stopOtpTimer(); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, deps: [{ token: i7.FormBuilder }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: ClaimProcessService }, { token: i1$1.BsModalService }, { token: i1$3.TokenService }, { token: i1$3.AuthLogoutService }, { token: IndustryService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", inputs: { useEmitter: "useEmitter" }, outputs: { loginNavigate: "loginNavigate", initialProcessNavigate: "initialProcessNavigate" }, ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></h2>\n\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\n\n  <!-- Left: Static marketing & branding panel -->\n  <aside class=\"cp-brand-left\">\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\n          }}</ng-container></span>\n      <p class=\"cp-brand-intro\">\n        Your account is ready. Complete this short form to set your credentials and unlock your access to the\n        platform's tools, programs, and services.\n      </p>\n    </div>\n\n    <ul class=\"cp-brand-features\">\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Secure &amp; Encrypted</strong>\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Instant Access</strong>\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Team &amp; Client Network</strong>\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Complete Your Profile</strong>\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\n        </div>\n      </li>\n    </ul>\n\n    <div class=\"cp-brand-contact\">\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n        </svg>\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\n        </svg>\n        {{ privacyAndTerms?.phone }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\n        </svg>\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\n          <path\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\n        </svg>\n      </a>\n    </div>\n\n  </aside>\n\n  <!-- Right: State-specific content -->\n  <main class=\"cp-brand-right\">\n\n    <!-- No Email Error -->\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n          </svg>\n        </div>\n        <h2>Invalid Access Link</h2>\n        <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your\n          account.</p>\n      </div>\n    </div>\n\n    <!-- Account Lookup: Loading -->\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card cp-lookup-loading\">\n        <span class=\"cp-spinner cp-lookup-spinner\"></span>\n        <p>Looking up your account\u2026</p>\n      </div>\n    </div>\n\n    <!-- Account Not Found -->\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5h2v6h-2zm0 8h2v2h-2z\" />\n          </svg>\n        </div>\n        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\n          Please click the button below to create a new account.\n        </p>\n        <!-- Pre-assigned role preview when type exists in invitation link -->\n        <ng-container *ngFor=\"let role of userViewRoles\">\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n              <div class=\"cp-role-card__img\">\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                <span class=\"cp-role-card__check\">\n                  <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                  </svg>\n                </span>\n              </div>\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\"\n              fill=\"#fff\" />\n          </svg>\n          Create New Account\n        </button>\n      </div>\n    </div>\n\n    <!-- Account Found -->\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\n      <div class=\"cp-anf-card\">\n        <div class=\"cp-anf-card__header\">\n          <div class=\"cp-anf-avatar\">\n            {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') ||\n            '?' }}\n          </div>\n          <div class=\"cp-anf-card__identity\">\n            <h2 class=\"cp-anf-card__name\">{{ auth0UserData.userDetails?.firstName }} {{\n              auth0UserData.userDetails?.lastName }}</h2>\n            <span class=\"cp-anf-card__email\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n              </svg>\n              {{ auth0UserData.email }}\n            </span>\n            <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\n              <span class=\"cp-anf-role\" *ngFor=\"let r of auth0UserData.userDetails.userRoles\">{{ r.roleName }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"cp-anf-card__notice\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\" />\n          </svg>\n          An account already exists for this email address.\n        </div>\n        <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\"\n              fill=\"#fff\" />\n          </svg>\n          Sign In to Your Account\n        </button>\n      </div>\n    </div>\n\n  </main>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\n  <div class=\"cp-success-card\">\n    <div class=\"cp-success-icon\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n      </svg>\n    </div>\n    <h2>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\n    <p>{{ userHasExistingDetails ? 'Your profile has been saved successfully.' : 'Your account has been successfully\n      activated.' }}</p>\n    <button *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\n          fill=\"#fff\" />\n      </svg>\n      Complete Initial Setup\n    </button>\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\n      </svg>\n      Go to Dashboard\n    </button>\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\"\n      (click)=\"navigateToLogin()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n        <path\n          d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" />\n      </svg>\n      Sign In Instead\n    </button>\n  </div>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\n<div *ngIf=\"!noEmailError && !submitSuccess && !auth0UserData && !isLookingUpAccount && !isInitializing\"\n  class=\"cp-page\">\n\n  <!-- Left Panel \u2014 Status Tracker -->\n  <aside class=\"cp-left\">\n    <div class=\"cp-left-inner mt-1\">\n\n      <!-- User identity card -->\n      <div class=\"cp-sb-user\">\n        <div class=\"cp-sb-avatar\">\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\n            {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n          </span>\n        </div>\n        <div class=\"cp-sb-user__info\">\n          <strong class=\"cp-sb-user__name\">\n            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) :\n            'Your Profile' }}\n          </strong>\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\n        </div>\n      </div>\n\n      <!-- Hero intro -->\n      <div class=\"cp-sb-hero\">\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\n            pendingRoleName }}</ng-container></span>\n        <p class=\"cp-sb-intro\">\n          {{ userHasExistingDetails\n          ? 'Review and update your personal, role, and business information below.'\n          : 'Complete this form to activate your account and unlock full platform access.' }}\n        </p>\n      </div>\n\n      <!-- Progress bar -->\n      <div class=\"cp-sb-progress\">\n        <div class=\"cp-sb-progress__bar\">\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\n        </div>\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\n      </div>\n\n      <!-- Section status steps -->\n      <ul class=\"cp-steps\">\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Personal Information</span>\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Account Setup</span>\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : ''\n              }}</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" *ngIf=\"isBusiness\" [class.cp-step--done]=\"sectionBusinessDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Business Info</span>\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\n            <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n      </ul>\n\n      <!-- Feature highlights -->\n      <ul class=\"cp-sb-features\">\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Secure &amp; Encrypted</strong>\n            <span>Protected end-to-end per our Privacy Policy.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Instant Access</strong>\n            <span>Immediate access to programs and service requests.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Professional Network</strong>\n            <span>Connect with certified professionals nationwide.</span>\n          </div>\n        </li>\n      </ul>\n\n      <!-- Footer contact -->\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\n          class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n          </svg>\n          {{ privacyAndTerms?.contactEmail }}\n        </a>\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\n          </svg>\n          {{ privacyAndTerms?.phone }}\n        </a>\n      </div>\n\n    </div>\n  </aside>\n\n  <!-- Right Panel \u2014 Form -->\n  <main class=\"cp-right\">\n\n    <!-- Mobile-only top bar -->\n    <div class=\"cp-mobile-bar\">\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\n        class=\"cp-mobile-logo\" />\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">{{ privacyAndTerms?.companyName }}</span>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\n        </svg>\n        Logout\n      </button>\n    </div>\n\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\n    <div class=\"cp-banner\">\n      <div class=\"cp-banner__avatar\">\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\n          {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n        </div>\n      </div>\n      <div class=\"cp-banner__info\">\n        <div class=\"cp-banner__name\">\n          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\n          Profile' }}\n        </div>\n        <div class=\"cp-banner__meta\">\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n            </svg>\n            {{ userEmail }}\n          </span>\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\n          </span>\n        </div>\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\n        </div>\n      </div>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\n        </svg>\n        Sign Out\n      </button>\n    </div>\n\n    <div class=\"cp-form-wrap\">\n\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n        </svg>\n        {{ userLookupError }}\n      </div>\n\n      <form (ngSubmit)=\"onSubmit()\" novalidate>\n\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Personal Information</h3>\n              <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\n              <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <!-- Pending notice: shown until a role is selected -->\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\n              </svg>\n              Please select your role in the Account Setup section below to unlock these fields.\n            </div>\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\n              <div class=\"cp-biz-layout\">\n                <!-- Left: fields -->\n                <div class=\"cp-biz-fields\">\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"firstName\">First Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"firstName\" formControlName=\"firstName\" placeholder=\"Jane\"\n                        [class.is-invalid]=\"u['firstName'].invalid && u['firstName'].touched\"\n                        autocomplete=\"given-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['firstName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"lastName\">Last Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"lastName\" formControlName=\"lastName\" placeholder=\"Doe\"\n                        [class.is-invalid]=\"u['lastName'].invalid && u['lastName'].touched\"\n                        autocomplete=\"family-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\n                    </div>\n                  </div>\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"address1\">Street Address</label>\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" placeholder=\"123 Main Street\"\n                        ngx-google-places-autocomplete [options]=\"googleOptions\"\n                        (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"address2\">Address Line 2</label>\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\n                        autocomplete=\"address-line2\" />\n                    </div>\n\n                    <div class=\"cp-field\">\n                      <label for=\"city\">City</label>\n                      <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\n                    </div>\n                  </div>\n\n                  <div class=\"cp-row cp-row--4\">\n                    <div class=\"cp-field\">\n                      <label for=\"state\">State</label>\n                      <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"county\">County</label>\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"zipcode\">Zip Code</label>\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\n                        maxlength=\"5\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\n                    </div>\n                  </div>\n\n                  <input type=\"hidden\" formControlName=\"latitude\" />\n                  <input type=\"hidden\" formControlName=\"longitude\" />\n\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                        Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"industries\">Industries</label>\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\n                        placeholder=\"Select industries (optional)\">\n                      </ng-select>\n                    </div>\n                  </div>\n\n                </div>\n\n                <!-- Right: profile photo -->\n                <div class=\"cp-biz-logo\">\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\n                      class=\"cp-upload-hidden\" />\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\n                      <span class=\"cp-biz-logo__change\">Change</span>\n                    </ng-container>\n                    <ng-template #profilePlaceholder>\n                      <div class=\"cp-biz-logo__placeholder\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path\n                            d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\n                        </svg>\n                        <span>Upload Photo</span>\n                        <small>PNG \u00B7 JPG</small>\n                      </div>\n                    </ng-template>\n                  </div>\n                </div>\n              </div>\n            </div><!-- /cp-fields-pending -->\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \u2550\u2550\u2550 -->\n        <div class=\"cp-card\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Account Setup</h3>\n              <p class=\"cp-card__sub\">Select your role and configure your password</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n\n            <!-- Role Cards (ref: initial-process userViewRoles) -->\n            <div class=\"cp-field\">\n              <label>\n                Select Your Role\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\n                  setup)</span>\n                <span *ngIf=\"lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\n              </label>\n\n              <!-- When locked from param, show only the pre-assigned card centred -->\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Normal grid of all role cards -->\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\n                    [attr.aria-label]=\"role.name\"\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Pre-assigned notice (from query param / localStorage) -->\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\n                    d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\n                </svg>\n                Your role has been pre-assigned from your invitation. Contact support to change it.\n              </div>\n\n              <!-- Locked after initial setup notice -->\n              <div class=\"cp-role-locked-notice\"\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\n                    d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\n                </svg>\n                Role is locked. Contact support to change it.\n              </div>\n\n              <div class=\"cp-error\"\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\n                Please\n                select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <ng-container *ngIf=\"resetPasswordEnabled\">\n                <ng-container *ngIf=\"passwordStep === 1\">\n                  <div class=\"cp-row\">\n                    <div class=\"cp-field\">\n                      <label for=\"newPassword\">New Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" formControlName=\"password\"\n                          placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\n                          <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\n                          </svg>\n                          <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"confirmPasswordReset\">Confirm Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\n                          </svg>\n                          <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\">\n                      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                    </svg>\n                    Password changed successfully.\n                  </div>\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\"\n                    [disabled]=\"isPasswordChanging\">\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\n                  </button>\n                </ng-container>\n\n                <ng-container *ngIf=\"passwordStep === 2\">\n                  <div class=\"cp-otp-wrap\">\n                    <p class=\"cp-otp-hint\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\">\n                        <path\n                          d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n                      </svg>\n                      Code sent to <strong>{{ userEmail }}</strong>\n                    </p>\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\">\n                        <path\n                          d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n                      </svg>\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\n                          }}</span>\n                          <span *ngIf=\"otpExpired\">Code expired</span>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"otpInput\">Enter 6-digit code</label>\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\n                    </div>\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                    <div class=\"cp-otp-actions\">\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\n                      </button>\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n            </ng-container>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" *ngIf=\"isBusiness\" [formGroup]=\"companyForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Business Information</h3>\n              <p class=\"cp-card__sub\">Company details and branding</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\n              <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!sectionBusinessDone\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <div class=\"cp-biz-layout\">\n              <div class=\"cp-biz-fields\">\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\n                    </div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\n                      Required</div>\n                  </div>\n                </div>\n\n\n                <div class=\"cp-field\">\n                  <label for=\"bizAddress1\">Business Address</label>\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCity\">City</label>\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizState\">State</label>\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\n                  </div>\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCounty\">County</label>\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizZipcode\">Zip</label>\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\n                      maxlength=\"5\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizCountry\">Country</label>\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\n                      autocomplete=\"country\" />\n                  </div>\n                </div>\n              </div>\n\n              <!-- Business logo -->\n              <div class=\"cp-biz-logo\">\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onBusinessLogoChange($event)\"\n                    class=\"cp-upload-hidden\" />\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\n                    <span class=\"cp-biz-logo__change\">Change</span>\n                  </ng-container>\n                  <ng-template #logoPlaceholder>\n                    <div class=\"cp-biz-logo__placeholder\">\n                      <svg viewBox=\"0 0 24 24\">\n                        <path\n                          d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\" />\n                      </svg>\n                      <span>Upload Logo</span>\n                      <small>PNG \u00B7 JPG</small>\n                    </div>\n                  </ng-template>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\n        <div class=\"cp-form-footer\">\n          <div class=\"cp-terms\">\n            <label class=\"cp-terms__label\">\n              <input type=\"checkbox\" class=\"cp-terms__check\" [checked]=\"model.acceptTerms && model.privacy\"\n                (change)=\"onTermsCheckboxChange($event)\" />\n              <span class=\"cp-terms__box\"></span>\n              <span>I accept the\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp;\n                  Conditions</a>\n                and\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>\n              </span>\n            </label>\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\n              You must accept the Terms and Privacy Policy to continue\n            </div>\n          </div>\n\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</div>\n\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\n              <path *ngIf=\"userHasExistingDetails\"\n                d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\"\n                fill=\"#fff\" />\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\" />\n            </svg>\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\n            Account')) }}\n          </button>\n        </div>\n\n      </form>\n    </div>\n\n  </main>\n\n</div>\n\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \u2500\u2500\u2500 -->\n<ng-template #termsAndConditionsModel>\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\n    <div class=\"modal-content tc-modal\">\n      <div class=\"tc-modal-header\">\n        <div class=\"tc-header-icon\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" />\n            <polyline points=\"14 2 14 8 20 8\" />\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n          </svg>\n        </div>\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      </div>\n      <div class=\"tc-modal-body\">\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-terms-conditions>\n        </ng-container>\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-privacy-policy>\n        </ng-container>\n      </div>\n      <div class=\"tc-modal-footer\">\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:20px;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-top:20px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.cp-sb-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.cp-steps{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;position:relative}.cp-steps:before{content:\"\";position:absolute;left:17px;top:20px;width:2px;bottom:20px;background:#e2eaf2;z-index:0}.cp-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;position:relative;z-index:1}.cp-step__icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;border:2px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}.cp-step__icon svg{width:15px;height:15px}.cp-step__icon svg path{fill:#6b7c8a;transition:fill .2s}.cp-step__body{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:5px;min-width:0}.cp-step__label{font-size:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:18px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:12px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:12px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;box-shadow:0 1px 3px #0000000a}.cp-card:first-of-type{margin-top:20px}@media (max-width: 860px){.cp-card{margin:12px 16px 0}}@media (max-width: 480px){.cp-card{margin:10px 12px 0;border-radius:8px}}.cp-card__header{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #f0f4f8;background:#fafbfc;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.cp-card__icon{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-card__icon svg{width:18px;height:18px}.cp-card__icon svg path{fill:#4077ad}.cp-card__title{font-size:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:14px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.cp-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ClaimProcessComponent, isStandalone: false, selector: "app-claim-process", inputs: { useEmitter: "useEmitter" }, outputs: { loginNavigate: "loginNavigate", initialProcessNavigate: "initialProcessNavigate" }, ngImport: i0, template: "<h2 class=\"sr-only\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></h2>\r\n\r\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\r\n\r\n  <!-- Left: Static marketing & branding panel -->\r\n  <aside class=\"cp-brand-left\">\r\n\r\n    <div class=\"cp-brand-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\r\n          }}</ng-container></span>\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock your access to the\r\n        platform's tools, programs, and services.\r\n      </p>\r\n    </div>\r\n\r\n    <ul class=\"cp-brand-features\">\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Secure &amp; Encrypted</strong>\r\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\r\n        </div>\r\n      </li>\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Instant Access</strong>\r\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\r\n        </div>\r\n      </li>\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Team &amp; Client Network</strong>\r\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\r\n        </div>\r\n      </li>\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Complete Your Profile</strong>\r\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n\r\n    <div class=\"cp-brand-contact\">\r\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\r\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.phone }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\r\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\r\n        </svg>\r\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\r\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\r\n          <path\r\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\r\n        </svg>\r\n      </a>\r\n    </div>\r\n\r\n  </aside>\r\n\r\n  <!-- Right: State-specific content -->\r\n  <main class=\"cp-brand-right\">\r\n\r\n    <!-- No Email Error -->\r\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\r\n      <div class=\"cp-invalid-card\">\r\n        <div class=\"cp-invalid-icon\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path\r\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\r\n          </svg>\r\n        </div>\r\n        <h2>Invalid Access Link</h2>\r\n        <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your\r\n          account.</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Lookup: Loading -->\r\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\r\n      <div class=\"cp-invalid-card cp-lookup-loading\">\r\n        <span class=\"cp-spinner cp-lookup-spinner\"></span>\r\n        <p>Looking up your account\u2026</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Not Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\r\n      <div class=\"cp-invalid-card\">\r\n        <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5h2v6h-2zm0 8h2v2h-2z\" />\r\n          </svg>\r\n        </div>\r\n        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\r\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\r\n          Please click the button below to create a new account.\r\n        </p>\r\n        <!-- Pre-assigned role preview when type exists in invitation link -->\r\n        <ng-container *ngFor=\"let role of userViewRoles\">\r\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\r\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\r\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n              <div class=\"cp-role-card__img\">\r\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                <span class=\"cp-role-card__check\">\r\n                  <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                  </svg>\r\n                </span>\r\n              </div>\r\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n            <path\r\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Create New Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\r\n      <div class=\"cp-anf-card\">\r\n        <div class=\"cp-anf-card__header\">\r\n          <div class=\"cp-anf-avatar\">\r\n            {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') ||\r\n            '?' }}\r\n          </div>\r\n          <div class=\"cp-anf-card__identity\">\r\n            <h2 class=\"cp-anf-card__name\">{{ auth0UserData.userDetails?.firstName }} {{\r\n              auth0UserData.userDetails?.lastName }}</h2>\r\n            <span class=\"cp-anf-card__email\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n              </svg>\r\n              {{ auth0UserData.email }}\r\n            </span>\r\n            <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\r\n              <span class=\"cp-anf-role\" *ngFor=\"let r of auth0UserData.userDetails.userRoles\">{{ r.roleName }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"cp-anf-card__notice\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\" />\r\n          </svg>\r\n          An account already exists for this email address.\r\n        </div>\r\n        <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Sign In to Your Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </main>\r\n</div>\r\n\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </svg>\r\n    </div>\r\n    <h2>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\r\n    <p>{{ userHasExistingDetails ? 'Your profile has been saved successfully.' : 'Your account has been successfully\r\n      activated.' }}</p>\r\n    <button *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\r\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\r\n          fill=\"#fff\" />\r\n      </svg>\r\n      Complete Initial Setup\r\n    </button>\r\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\r\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\r\n      </svg>\r\n      Go to Dashboard\r\n    </button>\r\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\"\r\n      (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n        <path\r\n          d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" />\r\n      </svg>\r\n      Sign In Instead\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess && !auth0UserData && !isLookingUpAccount && !isInitializing\"\r\n  class=\"cp-page\">\r\n\r\n  <!-- Left Panel \u2014 Status Tracker -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner mt-1\">\r\n\r\n      <!-- User identity card -->\r\n      <div class=\"cp-sb-user\">\r\n        <div class=\"cp-sb-avatar\">\r\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\r\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\r\n            {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-sb-user__info\">\r\n          <strong class=\"cp-sb-user__name\">\r\n            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) :\r\n            'Your Profile' }}\r\n          </strong>\r\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Hero intro -->\r\n      <div class=\"cp-sb-hero\">\r\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\r\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\r\n            pendingRoleName }}</ng-container></span>\r\n        <p class=\"cp-sb-intro\">\r\n          {{ userHasExistingDetails\r\n          ? 'Review and update your personal, role, and business information below.'\r\n          : 'Complete this form to activate your account and unlock full platform access.' }}\r\n        </p>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"cp-sb-progress\">\r\n        <div class=\"cp-sb-progress__bar\">\r\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\r\n        </div>\r\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\r\n      </div>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\">\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Information</span>\r\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </svg>\r\n          </span>\r\n        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Account Setup</span>\r\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : ''\r\n              }}</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </svg>\r\n          </span>\r\n        </li>\r\n\r\n        <li class=\"cp-step\" *ngIf=\"isBusiness\" [class.cp-step--done]=\"sectionBusinessDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Business Info</span>\r\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\r\n            <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </svg>\r\n          </span>\r\n        </li>\r\n\r\n      </ul>\r\n\r\n      <!-- Feature highlights -->\r\n      <ul class=\"cp-sb-features\">\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-feature__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n            </svg>\r\n          </span>\r\n          <div>\r\n            <strong>Secure &amp; Encrypted</strong>\r\n            <span>Protected end-to-end per our Privacy Policy.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-feature__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n            </svg>\r\n          </span>\r\n          <div>\r\n            <strong>Instant Access</strong>\r\n            <span>Immediate access to programs and service requests.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-feature__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n            </svg>\r\n          </span>\r\n          <div>\r\n            <strong>Professional Network</strong>\r\n            <span>Connect with certified professionals nationwide.</span>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n\r\n      <!-- Footer contact -->\r\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\r\n          class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.phone }}\r\n        </a>\r\n      </div>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n\r\n    <!-- Mobile-only top bar -->\r\n    <div class=\"cp-mobile-bar\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\r\n        class=\"cp-mobile-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">{{ privacyAndTerms?.companyName }}</span>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\r\n        </svg>\r\n        Logout\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\r\n    <div class=\"cp-banner\">\r\n      <div class=\"cp-banner__avatar\">\r\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\r\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\r\n          {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"cp-banner__info\">\r\n        <div class=\"cp-banner__name\">\r\n          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\r\n          Profile' }}\r\n        </div>\r\n        <div class=\"cp-banner__meta\">\r\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n            </svg>\r\n            {{ userEmail }}\r\n          </span>\r\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\r\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\r\n        </div>\r\n      </div>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\r\n        </svg>\r\n        Sign Out\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\r\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\r\n        </svg>\r\n        {{ userLookupError }}\r\n      </div>\r\n\r\n      <form (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\r\n              </svg>\r\n            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Personal Information</h3>\r\n              <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n              <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n              </svg>\r\n              <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <!-- Pending notice: shown until a role is selected -->\r\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\r\n              </svg>\r\n              Please select your role in the Account Setup section below to unlock these fields.\r\n            </div>\r\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\r\n              <div class=\"cp-biz-layout\">\r\n                <!-- Left: fields -->\r\n                <div class=\"cp-biz-fields\">\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"firstName\">First Name <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"firstName\" formControlName=\"firstName\" placeholder=\"Jane\"\r\n                        [class.is-invalid]=\"u['firstName'].invalid && u['firstName'].touched\"\r\n                        autocomplete=\"given-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['firstName'].touched\">Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"lastName\">Last Name <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"lastName\" formControlName=\"lastName\" placeholder=\"Doe\"\r\n                        [class.is-invalid]=\"u['lastName'].invalid && u['lastName'].touched\"\r\n                        autocomplete=\"family-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\r\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\r\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\r\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"address1\">Street Address</label>\r\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" placeholder=\"123 Main Street\"\r\n                        ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                        (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"address2\">Address Line 2</label>\r\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\r\n                        autocomplete=\"address-line2\" />\r\n                    </div>\r\n\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"city\">City</label>\r\n                      <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div class=\"cp-row cp-row--4\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"state\">State</label>\r\n                      <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"county\">County</label>\r\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"zipcode\">Zip Code</label>\r\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\r\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input type=\"hidden\" formControlName=\"latitude\" />\r\n                  <input type=\"hidden\" formControlName=\"longitude\" />\r\n\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\r\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\r\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                        Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\r\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\r\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"industries\">Industries</label>\r\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\r\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\r\n                        placeholder=\"Select industries (optional)\">\r\n                      </ng-select>\r\n                    </div>\r\n                  </div>\r\n\r\n                </div>\r\n\r\n                <!-- Right: profile photo -->\r\n                <div class=\"cp-biz-logo\">\r\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\r\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\r\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\r\n                      class=\"cp-upload-hidden\" />\r\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\r\n                      <span class=\"cp-biz-logo__change\">Change</span>\r\n                    </ng-container>\r\n                    <ng-template #profilePlaceholder>\r\n                      <div class=\"cp-biz-logo__placeholder\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\r\n                        </svg>\r\n                        <span>Upload Photo</span>\r\n                        <small>PNG \u00B7 JPG</small>\r\n                      </div>\r\n                    </ng-template>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div><!-- /cp-fields-pending -->\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\r\n              </svg>\r\n            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Account Setup</h3>\r\n              <p class=\"cp-card__sub\">Select your role and configure your password</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\r\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n              </svg>\r\n              <span *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n\r\n            <!-- Role Cards (ref: initial-process userViewRoles) -->\r\n            <div class=\"cp-field\">\r\n              <label>\r\n                Select Your Role\r\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\r\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\r\n                  setup)</span>\r\n                <span *ngIf=\"lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\r\n              </label>\r\n\r\n              <!-- When locked from param, show only the pre-assigned card centred -->\r\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                        </svg>\r\n                      </span>\r\n                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Normal grid of all role cards -->\r\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\r\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\r\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\r\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\r\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\r\n                    [attr.aria-label]=\"role.name\"\r\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                        </svg>\r\n                      </span>\r\n                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Pre-assigned notice (from query param / localStorage) -->\r\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\r\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n                </svg>\r\n                Your role has been pre-assigned from your invitation. Contact support to change it.\r\n              </div>\r\n\r\n              <!-- Locked after initial setup notice -->\r\n              <div class=\"cp-role-locked-notice\"\r\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\r\n                </svg>\r\n                Role is locked. Contact support to change it.\r\n              </div>\r\n\r\n              <div class=\"cp-error\"\r\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\r\n                Please\r\n                select a role</div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\r\n\r\n              <!-- Existing user: reset toggle -->\r\n              <div class=\"cp-toggle-row\">\r\n                <div class=\"cp-toggle-row__info\">\r\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\r\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\r\n                </div>\r\n                <label class=\"cp-toggle-switch\">\r\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                  <span class=\"cp-toggle-knob\"></span>\r\n                </label>\r\n              </div>\r\n\r\n              <ng-container *ngIf=\"resetPasswordEnabled\">\r\n                <ng-container *ngIf=\"passwordStep === 1\">\r\n                  <div class=\"cp-row\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"newPassword\">New Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" formControlName=\"password\"\r\n                          placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\r\n                          <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\r\n                          </svg>\r\n                          <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\r\n                          </svg>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"confirmPasswordReset\">Confirm Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\r\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\r\n                          </svg>\r\n                          <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\r\n                          </svg>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\r\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\">\r\n                      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                    </svg>\r\n                    Password changed successfully.\r\n                  </div>\r\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\"\r\n                    [disabled]=\"isPasswordChanging\">\r\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\r\n                  </button>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"passwordStep === 2\">\r\n                  <div class=\"cp-otp-wrap\">\r\n                    <p class=\"cp-otp-hint\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\">\r\n                        <path\r\n                          d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n                      </svg>\r\n                      Code sent to <strong>{{ userEmail }}</strong>\r\n                    </p>\r\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\">\r\n                        <path\r\n                          d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n                      </svg>\r\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\r\n                          }}</span>\r\n                          <span *ngIf=\"otpExpired\">Code expired</span>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"otpInput\">Enter 6-digit code</label>\r\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                    <div class=\"cp-otp-actions\">\r\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\r\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\r\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\r\n                      </button>\r\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\r\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\r\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" *ngIf=\"isBusiness\" [formGroup]=\"companyForm\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\r\n              </svg>\r\n            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Business Information</h3>\r\n              <p class=\"cp-card__sub\">Company details and branding</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\r\n              <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\r\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n              </svg>\r\n              <span *ngIf=\"!sectionBusinessDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-biz-layout\">\r\n              <div class=\"cp-biz-fields\">\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\r\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\r\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\r\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\r\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\r\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\r\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\r\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\r\n                      Required</div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"cp-field\">\r\n                  <label for=\"bizAddress1\">Business Address</label>\r\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\r\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCity\">City</label>\r\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizState\">State</label>\r\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCounty\">County</label>\r\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizZipcode\">Zip</label>\r\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\r\n                      maxlength=\"5\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCountry\">Country</label>\r\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\r\n                      autocomplete=\"country\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Business logo -->\r\n              <div class=\"cp-biz-logo\">\r\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\r\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\r\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onBusinessLogoChange($event)\"\r\n                    class=\"cp-upload-hidden\" />\r\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\r\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\r\n                    <span class=\"cp-biz-logo__change\">Change</span>\r\n                  </ng-container>\r\n                  <ng-template #logoPlaceholder>\r\n                    <div class=\"cp-biz-logo__placeholder\">\r\n                      <svg viewBox=\"0 0 24 24\">\r\n                        <path\r\n                          d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\" />\r\n                      </svg>\r\n                      <span>Upload Logo</span>\r\n                      <small>PNG \u00B7 JPG</small>\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\r\n        <div class=\"cp-form-footer\">\r\n          <div class=\"cp-terms\">\r\n            <label class=\"cp-terms__label\">\r\n              <input type=\"checkbox\" class=\"cp-terms__check\" [checked]=\"model.acceptTerms && model.privacy\"\r\n                (change)=\"onTermsCheckboxChange($event)\" />\r\n              <span class=\"cp-terms__box\"></span>\r\n              <span>I accept the\r\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp;\r\n                  Conditions</a>\r\n                and\r\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>\r\n              </span>\r\n            </label>\r\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n              You must accept the Terms and Privacy Policy to continue\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</div>\r\n\r\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\r\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\r\n              <path *ngIf=\"userHasExistingDetails\"\r\n                d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\"\r\n                fill=\"#fff\" />\r\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\" />\r\n            </svg>\r\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\r\n            Account')) }}\r\n          </button>\r\n        </div>\r\n\r\n      </form>\r\n    </div>\r\n\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" />\r\n            <polyline points=\"14 2 14 8 20 8\" />\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\r\n            [branding]=\"branding\"></app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\r\n            [branding]=\"branding\"></app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:20px;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-top:20px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.cp-sb-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.cp-steps{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;position:relative}.cp-steps:before{content:\"\";position:absolute;left:17px;top:20px;width:2px;bottom:20px;background:#e2eaf2;z-index:0}.cp-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;position:relative;z-index:1}.cp-step__icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;border:2px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}.cp-step__icon svg{width:15px;height:15px}.cp-step__icon svg path{fill:#6b7c8a;transition:fill .2s}.cp-step__body{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:5px;min-width:0}.cp-step__label{font-size:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:18px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:12px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:12px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;box-shadow:0 1px 3px #0000000a}.cp-card:first-of-type{margin-top:20px}@media (max-width: 860px){.cp-card{margin:12px 16px 0}}@media (max-width: 480px){.cp-card{margin:10px 12px 0;border-radius:8px}}.cp-card__header{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #f0f4f8;background:#fafbfc;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.cp-card__icon{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-card__icon svg{width:18px;height:18px}.cp-card__icon svg path{fill:#4077ad}.cp-card__title{font-size:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:14px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.cp-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ClaimProcessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></h2>\n\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\n\n  <!-- Left: Static marketing & branding panel -->\n  <aside class=\"cp-brand-left\">\n\n    <div class=\"cp-brand-hero\">\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\n          }}</ng-container></span>\n      <p class=\"cp-brand-intro\">\n        Your account is ready. Complete this short form to set your credentials and unlock your access to the\n        platform's tools, programs, and services.\n      </p>\n    </div>\n\n    <ul class=\"cp-brand-features\">\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Secure &amp; Encrypted</strong>\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Instant Access</strong>\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Team &amp; Client Network</strong>\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\n        </div>\n      </li>\n      <li class=\"cp-brand-feature\">\n        <span class=\"cp-brand-feature__icon\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n          </svg>\n        </span>\n        <div class=\"cp-brand-feature__body\">\n          <strong>Complete Your Profile</strong>\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\n        </div>\n      </li>\n    </ul>\n\n    <div class=\"cp-brand-contact\">\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n        </svg>\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\n        </svg>\n        {{ privacyAndTerms?.phone }}\n      </a>\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\n        </svg>\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\n          <path\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\n        </svg>\n      </a>\n    </div>\n\n  </aside>\n\n  <!-- Right: State-specific content -->\n  <main class=\"cp-brand-right\">\n\n    <!-- No Email Error -->\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n          </svg>\n        </div>\n        <h2>Invalid Access Link</h2>\n        <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your\n          account.</p>\n      </div>\n    </div>\n\n    <!-- Account Lookup: Loading -->\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card cp-lookup-loading\">\n        <span class=\"cp-spinner cp-lookup-spinner\"></span>\n        <p>Looking up your account\u2026</p>\n      </div>\n    </div>\n\n    <!-- Account Not Found -->\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\n      <div class=\"cp-invalid-card\">\n        <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5h2v6h-2zm0 8h2v2h-2z\" />\n          </svg>\n        </div>\n        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\n          Please click the button below to create a new account.\n        </p>\n        <!-- Pre-assigned role preview when type exists in invitation link -->\n        <ng-container *ngFor=\"let role of userViewRoles\">\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n              <div class=\"cp-role-card__img\">\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                <span class=\"cp-role-card__check\">\n                  <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                  </svg>\n                </span>\n              </div>\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\"\n              fill=\"#fff\" />\n          </svg>\n          Create New Account\n        </button>\n      </div>\n    </div>\n\n    <!-- Account Found -->\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\n      <div class=\"cp-anf-card\">\n        <div class=\"cp-anf-card__header\">\n          <div class=\"cp-anf-avatar\">\n            {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') ||\n            '?' }}\n          </div>\n          <div class=\"cp-anf-card__identity\">\n            <h2 class=\"cp-anf-card__name\">{{ auth0UserData.userDetails?.firstName }} {{\n              auth0UserData.userDetails?.lastName }}</h2>\n            <span class=\"cp-anf-card__email\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n              </svg>\n              {{ auth0UserData.email }}\n            </span>\n            <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\n              <span class=\"cp-anf-role\" *ngFor=\"let r of auth0UserData.userDetails.userRoles\">{{ r.roleName }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"cp-anf-card__notice\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\" />\n          </svg>\n          An account already exists for this email address.\n        </div>\n        <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\"\n              fill=\"#fff\" />\n          </svg>\n          Sign In to Your Account\n        </button>\n      </div>\n    </div>\n\n  </main>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\n  <div class=\"cp-success-card\">\n    <div class=\"cp-success-icon\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n      </svg>\n    </div>\n    <h2>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\n    <p>{{ userHasExistingDetails ? 'Your profile has been saved successfully.' : 'Your account has been successfully\n      activated.' }}</p>\n    <button *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\n          fill=\"#fff\" />\n      </svg>\n      Complete Initial Setup\n    </button>\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\n      </svg>\n      Go to Dashboard\n    </button>\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\"\n      (click)=\"navigateToLogin()\">\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n        <path\n          d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" />\n      </svg>\n      Sign In Instead\n    </button>\n  </div>\n</div>\n\n\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\n<div *ngIf=\"!noEmailError && !submitSuccess && !auth0UserData && !isLookingUpAccount && !isInitializing\"\n  class=\"cp-page\">\n\n  <!-- Left Panel \u2014 Status Tracker -->\n  <aside class=\"cp-left\">\n    <div class=\"cp-left-inner mt-1\">\n\n      <!-- User identity card -->\n      <div class=\"cp-sb-user\">\n        <div class=\"cp-sb-avatar\">\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\n            {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n          </span>\n        </div>\n        <div class=\"cp-sb-user__info\">\n          <strong class=\"cp-sb-user__name\">\n            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) :\n            'Your Profile' }}\n          </strong>\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\n        </div>\n      </div>\n\n      <!-- Hero intro -->\n      <div class=\"cp-sb-hero\">\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\n            pendingRoleName }}</ng-container></span>\n        <p class=\"cp-sb-intro\">\n          {{ userHasExistingDetails\n          ? 'Review and update your personal, role, and business information below.'\n          : 'Complete this form to activate your account and unlock full platform access.' }}\n        </p>\n      </div>\n\n      <!-- Progress bar -->\n      <div class=\"cp-sb-progress\">\n        <div class=\"cp-sb-progress__bar\">\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\n        </div>\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\n      </div>\n\n      <!-- Section status steps -->\n      <ul class=\"cp-steps\">\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Personal Information</span>\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Account Setup</span>\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : ''\n              }}</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n        <li class=\"cp-step\" *ngIf=\"isBusiness\" [class.cp-step--done]=\"sectionBusinessDone\">\n          <span class=\"cp-step__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\n            </svg>\n          </span>\n          <div class=\"cp-step__body\">\n            <span class=\"cp-step__label\">Business Info</span>\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\n          </div>\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\n            <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n            </svg>\n          </span>\n        </li>\n\n      </ul>\n\n      <!-- Feature highlights -->\n      <ul class=\"cp-sb-features\">\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Secure &amp; Encrypted</strong>\n            <span>Protected end-to-end per our Privacy Policy.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Instant Access</strong>\n            <span>Immediate access to programs and service requests.</span>\n          </div>\n        </li>\n        <li class=\"cp-sb-feature\">\n          <span class=\"cp-sb-feature__icon\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\n            </svg>\n          </span>\n          <div>\n            <strong>Professional Network</strong>\n            <span>Connect with certified professionals nationwide.</span>\n          </div>\n        </li>\n      </ul>\n\n      <!-- Footer contact -->\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\n          class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n          </svg>\n          {{ privacyAndTerms?.contactEmail }}\n        </a>\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\n          </svg>\n          {{ privacyAndTerms?.phone }}\n        </a>\n      </div>\n\n    </div>\n  </aside>\n\n  <!-- Right Panel \u2014 Form -->\n  <main class=\"cp-right\">\n\n    <!-- Mobile-only top bar -->\n    <div class=\"cp-mobile-bar\">\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\n        class=\"cp-mobile-logo\" />\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">{{ privacyAndTerms?.companyName }}</span>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\n        </svg>\n        Logout\n      </button>\n    </div>\n\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\n    <div class=\"cp-banner\">\n      <div class=\"cp-banner__avatar\">\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\n          {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\n        </div>\n      </div>\n      <div class=\"cp-banner__info\">\n        <div class=\"cp-banner__name\">\n          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\n          Profile' }}\n        </div>\n        <div class=\"cp-banner__meta\">\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\n            <svg viewBox=\"0 0 24 24\">\n              <path\n                d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n            </svg>\n            {{ userEmail }}\n          </span>\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\n          </span>\n        </div>\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\n        </div>\n      </div>\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (click)=\"logout()\">\n        <svg viewBox=\"0 0 24 24\">\n          <path\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\n        </svg>\n        Sign Out\n      </button>\n    </div>\n\n    <div class=\"cp-form-wrap\">\n\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n        </svg>\n        {{ userLookupError }}\n      </div>\n\n      <form (ngSubmit)=\"onSubmit()\" novalidate>\n\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Personal Information</h3>\n              <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\n              <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <!-- Pending notice: shown until a role is selected -->\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\n              </svg>\n              Please select your role in the Account Setup section below to unlock these fields.\n            </div>\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\n              <div class=\"cp-biz-layout\">\n                <!-- Left: fields -->\n                <div class=\"cp-biz-fields\">\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"firstName\">First Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"firstName\" formControlName=\"firstName\" placeholder=\"Jane\"\n                        [class.is-invalid]=\"u['firstName'].invalid && u['firstName'].touched\"\n                        autocomplete=\"given-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['firstName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"lastName\">Last Name <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"lastName\" formControlName=\"lastName\" placeholder=\"Doe\"\n                        [class.is-invalid]=\"u['lastName'].invalid && u['lastName'].touched\"\n                        autocomplete=\"family-name\" />\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\n                    </div>\n                  </div>\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"address1\">Street Address</label>\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" placeholder=\"123 Main Street\"\n                        ngx-google-places-autocomplete [options]=\"googleOptions\"\n                        (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"address2\">Address Line 2</label>\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\n                        autocomplete=\"address-line2\" />\n                    </div>\n\n                    <div class=\"cp-field\">\n                      <label for=\"city\">City</label>\n                      <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\n                    </div>\n                  </div>\n\n                  <div class=\"cp-row cp-row--4\">\n                    <div class=\"cp-field\">\n                      <label for=\"state\">State</label>\n                      <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"county\">County</label>\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"zipcode\">Zip Code</label>\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\n                        maxlength=\"5\" />\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\n                    </div>\n                  </div>\n\n                  <input type=\"hidden\" formControlName=\"latitude\" />\n                  <input type=\"hidden\" formControlName=\"longitude\" />\n\n                  <div class=\"cp-row cp-row--3\">\n                    <div class=\"cp-field\">\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\n                        Required</div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\n                      </ng-select>\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"industries\">Industries</label>\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\n                        placeholder=\"Select industries (optional)\">\n                      </ng-select>\n                    </div>\n                  </div>\n\n                </div>\n\n                <!-- Right: profile photo -->\n                <div class=\"cp-biz-logo\">\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\n                      class=\"cp-upload-hidden\" />\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\n                      <span class=\"cp-biz-logo__change\">Change</span>\n                    </ng-container>\n                    <ng-template #profilePlaceholder>\n                      <div class=\"cp-biz-logo__placeholder\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path\n                            d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\n                        </svg>\n                        <span>Upload Photo</span>\n                        <small>PNG \u00B7 JPG</small>\n                      </div>\n                    </ng-template>\n                  </div>\n                </div>\n              </div>\n            </div><!-- /cp-fields-pending -->\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \u2550\u2550\u2550 -->\n        <div class=\"cp-card\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Account Setup</h3>\n              <p class=\"cp-card__sub\">Select your role and configure your password</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n\n            <!-- Role Cards (ref: initial-process userViewRoles) -->\n            <div class=\"cp-field\">\n              <label>\n                Select Your Role\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\n                  setup)</span>\n                <span *ngIf=\"lockedToTypeFromParam\"\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\n              </label>\n\n              <!-- When locked from param, show only the pre-assigned card centred -->\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Normal grid of all role cards -->\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\n                <ng-container *ngFor=\"let role of userViewRoles\">\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\n                    [attr.aria-label]=\"role.name\"\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\n                    <div class=\"cp-role-card__img\">\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\n                        <svg viewBox=\"0 0 24 24\">\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                        </svg>\n                      </span>\n                    </div>\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\n                  </div>\n                </ng-container>\n              </div>\n\n              <!-- Pre-assigned notice (from query param / localStorage) -->\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\n                    d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\n                </svg>\n                Your role has been pre-assigned from your invitation. Contact support to change it.\n              </div>\n\n              <!-- Locked after initial setup notice -->\n              <div class=\"cp-role-locked-notice\"\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path\n                    d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\n                </svg>\n                Role is locked. Contact support to change it.\n              </div>\n\n              <div class=\"cp-error\"\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\n                Please\n                select a role</div>\n            </div>\n\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\n\n              <!-- Existing user: reset toggle -->\n              <div class=\"cp-toggle-row\">\n                <div class=\"cp-toggle-row__info\">\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\n                </div>\n                <label class=\"cp-toggle-switch\">\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\n                  <span class=\"cp-toggle-knob\"></span>\n                </label>\n              </div>\n\n              <ng-container *ngIf=\"resetPasswordEnabled\">\n                <ng-container *ngIf=\"passwordStep === 1\">\n                  <div class=\"cp-row\">\n                    <div class=\"cp-field\">\n                      <label for=\"newPassword\">New Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" formControlName=\"password\"\n                          placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\n                          <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\n                          </svg>\n                          <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"confirmPasswordReset\">Confirm Password</label>\n                      <div class=\"cp-pw-wrap\">\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\n                          </svg>\n                          <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\n                            <path\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\n                          </svg>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\">\n                      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n                    </svg>\n                    Password changed successfully.\n                  </div>\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\"\n                    [disabled]=\"isPasswordChanging\">\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\n                  </button>\n                </ng-container>\n\n                <ng-container *ngIf=\"passwordStep === 2\">\n                  <div class=\"cp-otp-wrap\">\n                    <p class=\"cp-otp-hint\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\">\n                        <path\n                          d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\n                      </svg>\n                      Code sent to <strong>{{ userEmail }}</strong>\n                    </p>\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\">\n                        <path\n                          d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n                      </svg>\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\n                          }}</span>\n                          <span *ngIf=\"otpExpired\">Code expired</span>\n                    </div>\n                    <div class=\"cp-field\">\n                      <label for=\"otpInput\">Enter 6-digit code</label>\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\n                    </div>\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\n                    <div class=\"cp-otp-actions\">\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\n                      </button>\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n            </ng-container>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\n        <div class=\"cp-card\" *ngIf=\"isBusiness\" [formGroup]=\"companyForm\">\n          <div class=\"cp-card__header\">\n            <span class=\"cp-card__icon\">\n              <svg viewBox=\"0 0 24 24\">\n                <path\n                  d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\n              </svg>\n            </span>\n            <div>\n              <h3 class=\"cp-card__title\">Business Information</h3>\n              <p class=\"cp-card__sub\">Company details and branding</p>\n            </div>\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\n              <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n              </svg>\n              <span *ngIf=\"!sectionBusinessDone\">\u2014</span>\n            </span>\n          </div>\n          <div class=\"cp-card__body\">\n            <div class=\"cp-biz-layout\">\n              <div class=\"cp-biz-fields\">\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\n                    </div>\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\n                      Required</div>\n                  </div>\n                </div>\n\n\n                <div class=\"cp-field\">\n                  <label for=\"bizAddress1\">Business Address</label>\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCity\">City</label>\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizState\">State</label>\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\n                  </div>\n                </div>\n\n                <div class=\"cp-row cp-row--3\">\n                  <div class=\"cp-field\">\n                    <label for=\"bizCounty\">County</label>\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizZipcode\">Zip</label>\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\n                      maxlength=\"5\" />\n                  </div>\n                  <div class=\"cp-field\">\n                    <label for=\"bizCountry\">Country</label>\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\n                      autocomplete=\"country\" />\n                  </div>\n                </div>\n              </div>\n\n              <!-- Business logo -->\n              <div class=\"cp-biz-logo\">\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onBusinessLogoChange($event)\"\n                    class=\"cp-upload-hidden\" />\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\n                    <span class=\"cp-biz-logo__change\">Change</span>\n                  </ng-container>\n                  <ng-template #logoPlaceholder>\n                    <div class=\"cp-biz-logo__placeholder\">\n                      <svg viewBox=\"0 0 24 24\">\n                        <path\n                          d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\" />\n                      </svg>\n                      <span>Upload Logo</span>\n                      <small>PNG \u00B7 JPG</small>\n                    </div>\n                  </ng-template>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\n        <div class=\"cp-form-footer\">\n          <div class=\"cp-terms\">\n            <label class=\"cp-terms__label\">\n              <input type=\"checkbox\" class=\"cp-terms__check\" [checked]=\"model.acceptTerms && model.privacy\"\n                (change)=\"onTermsCheckboxChange($event)\" />\n              <span class=\"cp-terms__box\"></span>\n              <span>I accept the\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp;\n                  Conditions</a>\n                and\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>\n              </span>\n            </label>\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\n              You must accept the Terms and Privacy Policy to continue\n            </div>\n          </div>\n\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</div>\n\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\n              <path *ngIf=\"userHasExistingDetails\"\n                d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\"\n                fill=\"#fff\" />\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\" />\n            </svg>\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\n            Account')) }}\n          </button>\n        </div>\n\n      </form>\n    </div>\n\n  </main>\n\n</div>\n\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \u2500\u2500\u2500 -->\n<ng-template #termsAndConditionsModel>\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\n    <div class=\"modal-content tc-modal\">\n      <div class=\"tc-modal-header\">\n        <div class=\"tc-header-icon\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" />\n            <polyline points=\"14 2 14 8 20 8\" />\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\n          </svg>\n        </div>\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      </div>\n      <div class=\"tc-modal-body\">\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-terms-conditions>\n        </ng-container>\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\n            [branding]=\"branding\"></app-privacy-policy>\n        </ng-container>\n      </div>\n      <div class=\"tc-modal-footer\">\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:20px;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-top:20px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.cp-sb-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.cp-steps{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;position:relative}.cp-steps:before{content:\"\";position:absolute;left:17px;top:20px;width:2px;bottom:20px;background:#e2eaf2;z-index:0}.cp-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;position:relative;z-index:1}.cp-step__icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;border:2px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}.cp-step__icon svg{width:15px;height:15px}.cp-step__icon svg path{fill:#6b7c8a;transition:fill .2s}.cp-step__body{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:5px;min-width:0}.cp-step__label{font-size:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:18px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:12px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:12px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;box-shadow:0 1px 3px #0000000a}.cp-card:first-of-type{margin-top:20px}@media (max-width: 860px){.cp-card{margin:12px 16px 0}}@media (max-width: 480px){.cp-card{margin:10px 12px 0;border-radius:8px}}.cp-card__header{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #f0f4f8;background:#fafbfc;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.cp-card__icon{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-card__icon svg{width:18px;height:18px}.cp-card__icon svg path{fill:#4077ad}.cp-card__title{font-size:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:14px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.cp-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"] }]
+            args: [{ selector: 'app-claim-process', standalone: false, template: "<h2 class=\"sr-only\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName }}</ng-container></h2>\r\n\r\n<!-- \u2500\u2500\u2500 Unauthenticated / Error states: branded two-column layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"noEmailError || isLookingUpAccount || auth0UserData || showAccountNotFound\" class=\"cp-page cp-page--brand\">\r\n\r\n  <!-- Left: Static marketing & branding panel -->\r\n  <aside class=\"cp-brand-left\">\r\n\r\n    <div class=\"cp-brand-hero\">\r\n      <span class=\"cp-brand-eyebrow\">Claim Your Account<ng-container *ngIf=\"pendingRoleName\"> \u2014 {{ pendingRoleName\r\n          }}</ng-container></span>\r\n      <p class=\"cp-brand-intro\">\r\n        Your account is ready. Complete this short form to set your credentials and unlock your access to the\r\n        platform's tools, programs, and services.\r\n      </p>\r\n    </div>\r\n\r\n    <ul class=\"cp-brand-features\">\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Secure &amp; Encrypted</strong>\r\n          <span>Your information is protected end-to-end and handled in accordance with our Privacy Policy.</span>\r\n        </div>\r\n      </li>\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Instant Access</strong>\r\n          <span>Once activated, you'll get immediate access to programs, rosters, and service requests.</span>\r\n        </div>\r\n      </li>\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Team &amp; Client Network</strong>\r\n          <span>Connect with certified professionals nationwide and manage your team from a single dashboard.</span>\r\n        </div>\r\n      </li>\r\n      <li class=\"cp-brand-feature\">\r\n        <span class=\"cp-brand-feature__icon\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\r\n          </svg>\r\n        </span>\r\n        <div class=\"cp-brand-feature__body\">\r\n          <strong>Complete Your Profile</strong>\r\n          <span>A complete profile unlocks every feature and makes you visible to clients and partners.</span>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n\r\n    <div class=\"cp-brand-contact\">\r\n      <a *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.email\"\r\n        [href]=\"'mailto:' + (privacyAndTerms.contactEmail || privacyAndTerms.email)\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.contactEmail || privacyAndTerms?.email }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-brand-contact__link\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\r\n        </svg>\r\n        {{ privacyAndTerms?.phone }}\r\n      </a>\r\n      <a *ngIf=\"privacyAndTerms?.websiteurl\" [href]=\"privacyAndTerms.websiteurl\" target=\"_blank\"\r\n        rel=\"noopener noreferrer\" class=\"cp-brand-contact__link cp-brand-contact__link--website\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\" />\r\n        </svg>\r\n        Visit {{ privacyAndTerms?.companyName || 'our website' }}\r\n        <svg viewBox=\"0 0 24 24\" class=\"cp-brand-contact__ext\">\r\n          <path\r\n            d=\"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\" />\r\n        </svg>\r\n      </a>\r\n    </div>\r\n\r\n  </aside>\r\n\r\n  <!-- Right: State-specific content -->\r\n  <main class=\"cp-brand-right\">\r\n\r\n    <!-- No Email Error -->\r\n    <div *ngIf=\"noEmailError\" class=\"cp-brand-state\">\r\n      <div class=\"cp-invalid-card\">\r\n        <div class=\"cp-invalid-icon\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path\r\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\r\n          </svg>\r\n        </div>\r\n        <h2>Invalid Access Link</h2>\r\n        <p>This page requires a valid invitation link. Please use the link from your invitation email to claim your\r\n          account.</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Lookup: Loading -->\r\n    <div *ngIf=\"isLookingUpAccount\" class=\"cp-brand-state\">\r\n      <div class=\"cp-invalid-card cp-lookup-loading\">\r\n        <span class=\"cp-spinner cp-lookup-spinner\"></span>\r\n        <p>Looking up your account\u2026</p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Not Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && !auth0UserData && showAccountNotFound\" class=\"cp-brand-state\">\r\n      <div class=\"cp-invalid-card\">\r\n        <div class=\"cp-invalid-icon cp-invalid-icon--warn\">\r\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5h2v6h-2zm0 8h2v2h-2z\" />\r\n          </svg>\r\n        </div>\r\n        <p [style.margin-bottom]=\"pendingParamType ? '16px' : null\">\r\n          The email address <strong>{{ userEmail }}</strong> is not associated with an account on our platform.\r\n          Please click the button below to create a new account.\r\n        </p>\r\n        <!-- Pre-assigned role preview when type exists in invitation link -->\r\n        <ng-container *ngFor=\"let role of userViewRoles\">\r\n          <div *ngIf=\"pendingParamType && role.type === pendingParamType\" class=\"cp-anf-role-preview\">\r\n            <span class=\"cp-anf-role-label\">Your pre-assigned role</span>\r\n            <div class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n              <div class=\"cp-role-card__img\">\r\n                <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                <span class=\"cp-role-card__check\">\r\n                  <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                  </svg>\r\n                </span>\r\n              </div>\r\n              <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <button type=\"button\" class=\"cp-btn\" style=\"margin-top:20px\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n            <path\r\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Create New Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Account Found -->\r\n    <div *ngIf=\"!isLookingUpAccount && auth0UserData\" class=\"cp-brand-state\">\r\n      <div class=\"cp-anf-card\">\r\n        <div class=\"cp-anf-card__header\">\r\n          <div class=\"cp-anf-avatar\">\r\n            {{ (auth0UserData.userDetails?.firstName?.[0] || '') + (auth0UserData.userDetails?.lastName?.[0] || '') ||\r\n            '?' }}\r\n          </div>\r\n          <div class=\"cp-anf-card__identity\">\r\n            <h2 class=\"cp-anf-card__name\">{{ auth0UserData.userDetails?.firstName }} {{\r\n              auth0UserData.userDetails?.lastName }}</h2>\r\n            <span class=\"cp-anf-card__email\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n              </svg>\r\n              {{ auth0UserData.email }}\r\n            </span>\r\n            <div class=\"cp-anf-roles\" *ngIf=\"auth0UserData.userDetails?.userRoles?.length\">\r\n              <span class=\"cp-anf-role\" *ngFor=\"let r of auth0UserData.userDetails.userRoles\">{{ r.roleName }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"cp-anf-card__notice\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\" />\r\n          </svg>\r\n          An account already exists for this email address.\r\n        </div>\r\n        <button type=\"button\" class=\"cp-anf-signin-btn\" (click)=\"navigateToLogin()\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\"\r\n              fill=\"#fff\" />\r\n          </svg>\r\n          Sign In to Your Account\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </main>\r\n</div>\r\n\r\n\r\n<!-- \u2500\u2500\u2500 Success State \u2500\u2500\u2500 -->\r\n<div *ngIf=\"submitSuccess\" class=\"cp-success-page\">\r\n  <div class=\"cp-success-card\">\r\n    <div class=\"cp-success-icon\">\r\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n        <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </svg>\r\n    </div>\r\n    <h2>{{ userHasExistingDetails ? 'Profile Updated!' : 'Account Activated!' }}</h2>\r\n    <p>{{ userHasExistingDetails ? 'Your profile has been saved successfully.' : 'Your account has been successfully\r\n      activated.' }}</p>\r\n    <button *ngIf=\"!isInitialSetupCompleted && libConfig?.initialUrl\" type=\"button\" class=\"cp-btn\"\r\n      style=\"margin-top:20px\" (click)=\"navigateToInitialProcess()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\r\n          fill=\"#fff\" />\r\n      </svg>\r\n      Complete Initial Setup\r\n    </button>\r\n    <button type=\"button\" class=\"cp-btn\" [class.cp-btn--ghost]=\"!isInitialSetupCompleted && libConfig?.initialUrl\"\r\n      style=\"margin-top:10px\" (click)=\"navigateToDashboard()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:17px;height:17px;flex-shrink:0\">\r\n        <path d=\"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z\" fill=\"currentColor\" />\r\n      </svg>\r\n      Go to Dashboard\r\n    </button>\r\n    <button *ngIf=\"!userHasExistingDetails\" type=\"button\" class=\"cp-btn cp-btn--ghost\" style=\"margin-top:10px\"\r\n      (click)=\"navigateToLogin()\">\r\n      <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n        <path\r\n          d=\"M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z\" />\r\n      </svg>\r\n      Sign In Instead\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \u2500\u2500\u2500 Main Layout \u2500\u2500\u2500 -->\r\n<div *ngIf=\"!noEmailError && !submitSuccess && !auth0UserData && !isLookingUpAccount && !isInitializing\"\r\n  class=\"cp-page\">\r\n\r\n  <!-- Left Panel \u2014 Status Tracker -->\r\n  <aside class=\"cp-left\">\r\n    <div class=\"cp-left-inner mt-1\">\r\n\r\n      <!-- User identity card -->\r\n      <div class=\"cp-sb-user\">\r\n        <div class=\"cp-sb-avatar\">\r\n          <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-sb-avatar__img\" />\r\n          <span *ngIf=\"!profilePreviewUrl\" class=\"cp-sb-avatar__initials\">\r\n            {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-sb-user__info\">\r\n          <strong class=\"cp-sb-user__name\">\r\n            {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) :\r\n            'Your Profile' }}\r\n          </strong>\r\n          <span class=\"cp-sb-user__email\">{{ userEmail }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Hero intro -->\r\n      <div class=\"cp-sb-hero\">\r\n        <span class=\"cp-sb-eyebrow\">{{ userHasExistingDetails ? 'Profile Update' : 'Claim Your Account' }}<ng-container\r\n            *ngIf=\"!userHasExistingDetails && (selectedRole?.name || pendingRoleName)\"> \u2014 {{ selectedRole?.name ||\r\n            pendingRoleName }}</ng-container></span>\r\n        <p class=\"cp-sb-intro\">\r\n          {{ userHasExistingDetails\r\n          ? 'Review and update your personal, role, and business information below.'\r\n          : 'Complete this form to activate your account and unlock full platform access.' }}\r\n        </p>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"cp-sb-progress\">\r\n        <div class=\"cp-sb-progress__bar\">\r\n          <div class=\"cp-sb-progress__fill\" [style.width.%]=\"overallProgress\"></div>\r\n        </div>\r\n        <span class=\"cp-sb-progress__label\">{{ overallProgress }}% complete</span>\r\n      </div>\r\n\r\n      <!-- Section status steps -->\r\n      <ul class=\"cp-steps\">\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionPersonalDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Personal Information</span>\r\n            <span class=\"cp-step__sub\">Name, address, profile photo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n            <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </svg>\r\n          </span>\r\n        </li>\r\n\r\n        <li class=\"cp-step\" [class.cp-step--done]=\"sectionRoleDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Account Setup</span>\r\n            <span class=\"cp-step__sub\">Role selection{{ (setPasswordEnabled || resetPasswordEnabled) ? ', password' : ''\r\n              }}</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n            <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </svg>\r\n          </span>\r\n        </li>\r\n\r\n        <li class=\"cp-step\" *ngIf=\"isBusiness\" [class.cp-step--done]=\"sectionBusinessDone\">\r\n          <span class=\"cp-step__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\r\n            </svg>\r\n          </span>\r\n          <div class=\"cp-step__body\">\r\n            <span class=\"cp-step__label\">Business Info</span>\r\n            <span class=\"cp-step__sub\">Name, email, address, logo</span>\r\n          </div>\r\n          <span class=\"cp-step__badge\" [class.cp-step__badge--done]=\"sectionBusinessDone\">\r\n            <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\r\n              <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n            </svg>\r\n          </span>\r\n        </li>\r\n\r\n      </ul>\r\n\r\n      <!-- Feature highlights -->\r\n      <ul class=\"cp-sb-features\">\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-feature__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n            </svg>\r\n          </span>\r\n          <div>\r\n            <strong>Secure &amp; Encrypted</strong>\r\n            <span>Protected end-to-end per our Privacy Policy.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-feature__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M7 2v11h3v9l7-12h-4l4-8z\" />\r\n            </svg>\r\n          </span>\r\n          <div>\r\n            <strong>Instant Access</strong>\r\n            <span>Immediate access to programs and service requests.</span>\r\n          </div>\r\n        </li>\r\n        <li class=\"cp-sb-feature\">\r\n          <span class=\"cp-sb-feature__icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\" />\r\n            </svg>\r\n          </span>\r\n          <div>\r\n            <strong>Professional Network</strong>\r\n            <span>Connect with certified professionals nationwide.</span>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n\r\n      <!-- Footer contact -->\r\n      <div class=\"cp-left-contact\" *ngIf=\"privacyAndTerms?.contactEmail || privacyAndTerms?.phone\">\r\n        <a *ngIf=\"privacyAndTerms?.contactEmail\" [href]=\"'mailto:' + privacyAndTerms.contactEmail\"\r\n          class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.contactEmail }}\r\n        </a>\r\n        <a *ngIf=\"privacyAndTerms?.phone\" [href]=\"'tel:' + privacyAndTerms.phone\" class=\"cp-contact-link\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\" />\r\n          </svg>\r\n          {{ privacyAndTerms?.phone }}\r\n        </a>\r\n      </div>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Right Panel \u2014 Form -->\r\n  <main class=\"cp-right\">\r\n\r\n    <!-- Mobile-only top bar -->\r\n    <div class=\"cp-mobile-bar\">\r\n      <img *ngIf=\"privacyAndTerms?.logoUrl\" [src]=\"privacyAndTerms.logoUrl\" [alt]=\"privacyAndTerms?.companyName\"\r\n        class=\"cp-mobile-logo\" />\r\n      <span *ngIf=\"!privacyAndTerms?.logoUrl\" class=\"cp-mobile-company\">{{ privacyAndTerms?.companyName }}</span>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn cp-logout-btn--mobile\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\r\n        </svg>\r\n        Logout\r\n      </button>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500\u2500 Profile Banner \u2500\u2500\u2500 -->\r\n    <div class=\"cp-banner\">\r\n      <div class=\"cp-banner__avatar\">\r\n        <img *ngIf=\"profilePreviewUrl\" [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-banner__img\" />\r\n        <div *ngIf=\"!profilePreviewUrl\" class=\"cp-banner__initials\">\r\n          {{ (u['firstName'].value?.[0] || '') + (u['lastName'].value?.[0] || '') || '?' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"cp-banner__info\">\r\n        <div class=\"cp-banner__name\">\r\n          {{ (u['firstName'].value || u['lastName'].value) ? (u['firstName'].value + ' ' + u['lastName'].value) : 'Your\r\n          Profile' }}\r\n        </div>\r\n        <div class=\"cp-banner__meta\">\r\n          <span class=\"cp-banner__email\" *ngIf=\"userEmail\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n            </svg>\r\n            {{ userEmail }}\r\n          </span>\r\n          <span class=\"cp-banner__badge\" [class.cp-banner__badge--update]=\"userHasExistingDetails\">\r\n            {{ userHasExistingDetails ? 'Profile Update' : 'Account Activation' }}\r\n          </span>\r\n        </div>\r\n        <div class=\"cp-banner__loading\" *ngIf=\"isLoadingUser\">\r\n          <span class=\"cp-spinner cp-spinner--sm\"></span> Loading profile\u2026\r\n        </div>\r\n      </div>\r\n      <button *ngIf=\"userId\" type=\"button\" class=\"cp-logout-btn--banner\" (click)=\"logout()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path\r\n            d=\"M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zm-5 12H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2z\" />\r\n        </svg>\r\n        Sign Out\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"cp-form-wrap\">\r\n\r\n      <div class=\"cp-error cp-alert\" *ngIf=\"userLookupError\">\r\n        <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;flex-shrink:0\">\r\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\r\n        </svg>\r\n        {{ userLookupError }}\r\n      </div>\r\n\r\n      <form (ngSubmit)=\"onSubmit()\" novalidate>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Personal Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" [formGroup]=\"userForm\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\r\n              </svg>\r\n            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Personal Information</h3>\r\n              <p class=\"cp-card__sub\">Name, contact, address and profile photo</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionPersonalDone && sectionPhotoDone\">\r\n              <svg *ngIf=\"sectionPersonalDone && sectionPhotoDone\" viewBox=\"0 0 24 24\">\r\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n              </svg>\r\n              <span *ngIf=\"!(sectionPersonalDone && sectionPhotoDone)\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <!-- Pending notice: shown until a role is selected -->\r\n            <div *ngIf=\"!selectedRoleValue && !isLoadingUser\" class=\"cp-pending-notice\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\r\n              </svg>\r\n              Please select your role in the Account Setup section below to unlock these fields.\r\n            </div>\r\n            <div [class.cp-fields-pending]=\"!selectedRoleValue && !isLoadingUser\">\r\n              <div class=\"cp-biz-layout\">\r\n                <!-- Left: fields -->\r\n                <div class=\"cp-biz-fields\">\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"firstName\">First Name <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"firstName\" formControlName=\"firstName\" placeholder=\"Jane\"\r\n                        [class.is-invalid]=\"u['firstName'].invalid && u['firstName'].touched\"\r\n                        autocomplete=\"given-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['firstName'].invalid && u['firstName'].touched\">Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"lastName\">Last Name <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"lastName\" formControlName=\"lastName\" placeholder=\"Doe\"\r\n                        [class.is-invalid]=\"u['lastName'].invalid && u['lastName'].touched\"\r\n                        autocomplete=\"family-name\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['lastName'].invalid && u['lastName'].touched\">Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"phoneNumber\">Phone <span class=\"req\">*</span></label>\r\n                      <input type=\"tel\" id=\"phoneNumber\" formControlName=\"phoneNumber\" placeholder=\"(555) 123-4567\"\r\n                        maxlength=\"14\" [class.is-invalid]=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\"\r\n                        (input)=\"formatPhone($event, 'user')\" autocomplete=\"tel\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['phoneNumber'].invalid && u['phoneNumber'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"address1\">Street Address</label>\r\n                      <input type=\"text\" id=\"address1\" formControlName=\"address1\" placeholder=\"123 Main Street\"\r\n                        ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                        (onAddressChange)=\"onAddressChange($event)\" autocomplete=\"off\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"address2\">Address Line 2</label>\r\n                      <input type=\"text\" id=\"address2\" formControlName=\"address2\" placeholder=\"Apt, Suite, Unit, etc.\"\r\n                        autocomplete=\"address-line2\" />\r\n                    </div>\r\n\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"city\">City</label>\r\n                      <input type=\"text\" id=\"city\" formControlName=\"city\" placeholder=\"Orlando\" />\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div class=\"cp-row cp-row--4\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"state\">State</label>\r\n                      <input type=\"text\" id=\"state\" formControlName=\"state\" placeholder=\"FL\" maxlength=\"2\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"county\">County</label>\r\n                      <input type=\"text\" id=\"county\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"zipcode\">Zip Code</label>\r\n                      <input type=\"text\" id=\"zipcode\" formControlName=\"zipcode\" placeholder=\"32801\" inputmode=\"numeric\"\r\n                        maxlength=\"5\" />\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"country\">Country <span class=\"req\">*</span></label>\r\n                      <input type=\"text\" id=\"country\" formControlName=\"country\" placeholder=\"US\"\r\n                        [class.is-invalid]=\"u['country'].invalid && u['country'].touched\" autocomplete=\"country\" />\r\n                      <div class=\"cp-error\" *ngIf=\"u['country'].invalid && u['country'].touched\">Required</div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <input type=\"hidden\" formControlName=\"latitude\" />\r\n                  <input type=\"hidden\" formControlName=\"longitude\" />\r\n\r\n                  <div class=\"cp-row cp-row--3\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"yearsOfExperince\">Years of Experience <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"yearsOfExperince\" formControlName=\"yearsOfExperince\" [items]=\"expYears\"\r\n                        bindLabel=\"text\" bindValue=\"value\" placeholder=\"Select years\" [clearable]=\"false\"\r\n                        [class.is-invalid]=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['yearsOfExperince'].invalid && u['yearsOfExperince'].touched\">\r\n                        Required</div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"userJobTitle\">Job Title(s) <span class=\"req\">*</span></label>\r\n                      <ng-select id=\"userJobTitle\" formControlName=\"userJobTitle\" [items]=\"jobTitles\" bindLabel=\"text\"\r\n                        bindValue=\"value\" [multiple]=\"true\" placeholder=\"Select job title(s)\"\r\n                        [class.is-invalid]=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">\r\n                      </ng-select>\r\n                      <div class=\"cp-error\" *ngIf=\"u['userJobTitle'].invalid && u['userJobTitle'].touched\">Required\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"industries\">Industries</label>\r\n                      <ng-select id=\"industries\" formControlName=\"industries\" [items]=\"industries\"\r\n                        bindLabel=\"industryName\" bindValue=\"id\" [multiple]=\"true\" [loading]=\"isIndustriesLoading\"\r\n                        placeholder=\"Select industries (optional)\">\r\n                      </ng-select>\r\n                    </div>\r\n                  </div>\r\n\r\n                </div>\r\n\r\n                <!-- Right: profile photo -->\r\n                <div class=\"cp-biz-logo\">\r\n                  <label class=\"cp-biz-logo__label\">Profile Photo</label>\r\n                  <div class=\"cp-biz-logo__area cp-profile-logo-area\" (click)=\"cpProfileInput.click()\">\r\n                    <input #cpProfileInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onProfileFileChange($event)\"\r\n                      class=\"cp-upload-hidden\" />\r\n                    <ng-container *ngIf=\"profilePreviewUrl; else profilePlaceholder\">\r\n                      <img [src]=\"profilePreviewUrl\" alt=\"Profile\" class=\"cp-profile-logo-img\" />\r\n                      <span class=\"cp-biz-logo__change\">Change</span>\r\n                    </ng-container>\r\n                    <ng-template #profilePlaceholder>\r\n                      <div class=\"cp-biz-logo__placeholder\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path\r\n                            d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6Z\" />\r\n                        </svg>\r\n                        <span>Upload Photo</span>\r\n                        <small>PNG \u00B7 JPG</small>\r\n                      </div>\r\n                    </ng-template>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div><!-- /cp-fields-pending -->\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Account Setup \u2014 Role Cards + Password \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\r\n              </svg>\r\n            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Account Setup</h3>\r\n              <p class=\"cp-card__sub\">Select your role and configure your password</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionRoleDone && sectionPasswordDone\">\r\n              <svg *ngIf=\"sectionRoleDone && sectionPasswordDone\" viewBox=\"0 0 24 24\">\r\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n              </svg>\r\n              <span *ngIf=\"!(sectionRoleDone && sectionPasswordDone)\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n\r\n            <!-- Role Cards (ref: initial-process userViewRoles) -->\r\n            <div class=\"cp-field\">\r\n              <label>\r\n                Select Your Role\r\n                <span class=\"req\" *ngIf=\"!isInitialSetupCompleted && !lockedToTypeFromParam\">*</span>\r\n                <span *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#6b7c8a;font-size:11px;margin-left:4px;\">(locked after initial\r\n                  setup)</span>\r\n                <span *ngIf=\"lockedToTypeFromParam\"\r\n                  style=\"font-weight:400;color:#2563eb;font-size:11px;margin-left:4px;\">(pre-assigned)</span>\r\n              </label>\r\n\r\n              <!-- When locked from param, show only the pre-assigned card centred -->\r\n              <div *ngIf=\"lockedToTypeFromParam\" class=\"cp-role-cards cp-role-cards--preassigned\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div *ngIf=\"role.selected\" class=\"cp-role-card cp-role-card--selected cp-role-card--preassigned\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                        </svg>\r\n                      </span>\r\n                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Normal grid of all role cards -->\r\n              <div *ngIf=\"!lockedToTypeFromParam\" class=\"cp-role-cards\"\r\n                [class.cp-role-cards--locked]=\"isInitialSetupCompleted\">\r\n                <ng-container *ngFor=\"let role of userViewRoles\">\r\n                  <div class=\"cp-role-card\" [class.cp-role-card--selected]=\"role.selected\"\r\n                    [class.cp-role-card--disabled]=\"isInitialSetupCompleted\"\r\n                    (click)=\"!isInitialSetupCompleted && selectedUserRole(role)\"\r\n                    [attr.role]=\"isInitialSetupCompleted ? null : 'button'\" [attr.aria-pressed]=\"role.selected\"\r\n                    [attr.aria-label]=\"role.name\"\r\n                    [attr.title]=\"isInitialSetupCompleted ? 'Role cannot be changed after initial setup is complete' : null\">\r\n                    <div class=\"cp-role-card__img\">\r\n                      <img [src]=\"role.img\" [alt]=\"role.name\" (error)=\"$any($event.target).style.display='none'\" />\r\n                      <span class=\"cp-role-card__check\" *ngIf=\"role.selected\">\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                        </svg>\r\n                      </span>\r\n                    </div>\r\n                    <span class=\"cp-role-card__name\">{{ role.name }}</span>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <!-- Pre-assigned notice (from query param / localStorage) -->\r\n              <div class=\"cp-role-locked-notice cp-role-preassigned-notice\"\r\n                *ngIf=\"lockedToTypeFromParam && sectionRoleDone\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l5 2.18V11c0 3.5-2.33 6.79-5 7.93-2.67-1.14-5-4.43-5-7.93V7.18L12 5z\" />\r\n                </svg>\r\n                Your role has been pre-assigned from your invitation. Contact support to change it.\r\n              </div>\r\n\r\n              <!-- Locked after initial setup notice -->\r\n              <div class=\"cp-role-locked-notice\"\r\n                *ngIf=\"isInitialSetupCompleted && !lockedToTypeFromParam && sectionRoleDone\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\r\n                </svg>\r\n                Role is locked. Contact support to change it.\r\n              </div>\r\n\r\n              <div class=\"cp-error\"\r\n                *ngIf=\"!sectionRoleDone && validatePage === 1 && !isInitialSetupCompleted && !lockedToTypeFromParam\">\r\n                Please\r\n                select a role</div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isLoadingUser\" [formGroup]=\"userForm\">\r\n\r\n              <!-- Existing user: reset toggle -->\r\n              <div class=\"cp-toggle-row\">\r\n                <div class=\"cp-toggle-row__info\">\r\n                  <span class=\"cp-toggle-row__label\">Reset Password</span>\r\n                  <span class=\"cp-toggle-row__hint\">Enable to change your current password</span>\r\n                </div>\r\n                <label class=\"cp-toggle-switch\">\r\n                  <input type=\"checkbox\" [checked]=\"resetPasswordEnabled\" (change)=\"toggleResetPassword()\">\r\n                  <span class=\"cp-toggle-knob\"></span>\r\n                </label>\r\n              </div>\r\n\r\n              <ng-container *ngIf=\"resetPasswordEnabled\">\r\n                <ng-container *ngIf=\"passwordStep === 1\">\r\n                  <div class=\"cp-row\">\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"newPassword\">New Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showPassword ? 'text' : 'password'\" id=\"newPassword\" formControlName=\"password\"\r\n                          placeholder=\"Min. 8 characters\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showPassword = !showPassword\">\r\n                          <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\r\n                          </svg>\r\n                          <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\r\n                          </svg>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"confirmPasswordReset\">Confirm Password</label>\r\n                      <div class=\"cp-pw-wrap\">\r\n                        <input [type]=\"showConfirmPassword ? 'text' : 'password'\" id=\"confirmPasswordReset\"\r\n                          formControlName=\"confirmPassword\" placeholder=\"Repeat password\" autocomplete=\"new-password\" />\r\n                        <button type=\"button\" class=\"cp-pw-toggle\" (click)=\"showConfirmPassword = !showConfirmPassword\">\r\n                          <svg *ngIf=\"!showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\" />\r\n                          </svg>\r\n                          <svg *ngIf=\"showConfirmPassword\" viewBox=\"0 0 24 24\">\r\n                            <path\r\n                              d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\" />\r\n                          </svg>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                  <div class=\"cp-pw-success\" *ngIf=\"passwordChangeSuccess\">\r\n                    <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px\">\r\n                      <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                    </svg>\r\n                    Password changed successfully.\r\n                  </div>\r\n                  <button type=\"button\" class=\"cp-btn cp-btn--outline cp-btn--sm\" (click)=\"changePassword()\"\r\n                    [disabled]=\"isPasswordChanging\">\r\n                    <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                    {{ isPasswordChanging ? 'Sending\u2026' : 'Send Verification Code' }}\r\n                  </button>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"passwordStep === 2\">\r\n                  <div class=\"cp-otp-wrap\">\r\n                    <p class=\"cp-otp-hint\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:15px;height:15px;flex-shrink:0\">\r\n                        <path\r\n                          d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z\" />\r\n                      </svg>\r\n                      Code sent to <strong>{{ userEmail }}</strong>\r\n                    </p>\r\n                    <div class=\"cp-otp-timer\" [class.cp-otp-timer--expired]=\"otpExpired\">\r\n                      <svg viewBox=\"0 0 24 24\" style=\"width:14px;height:14px\">\r\n                        <path\r\n                          d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n                      </svg>\r\n                      <span *ngIf=\"!otpExpired\">{{ otpMinutes }}:{{ otpSeconds < 10 ? '0' + otpSeconds : otpSeconds\r\n                          }}</span>\r\n                          <span *ngIf=\"otpExpired\">Code expired</span>\r\n                    </div>\r\n                    <div class=\"cp-field\">\r\n                      <label for=\"otpInput\">Enter 6-digit code</label>\r\n                      <input type=\"text\" id=\"otpInput\" [(ngModel)]=\"otpValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                        placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\" maxlength=\"6\" inputmode=\"numeric\" class=\"cp-otp-input\" />\r\n                    </div>\r\n                    <div class=\"cp-error\" *ngIf=\"passwordChangeError\">{{ passwordChangeError }}</div>\r\n                    <div class=\"cp-otp-actions\">\r\n                      <button type=\"button\" class=\"cp-btn\" (click)=\"verifyPasswordOtp()\"\r\n                        [disabled]=\"otpExpired || !otpValue || isPasswordChanging\">\r\n                        <span *ngIf=\"isPasswordChanging\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n                        {{ isPasswordChanging ? 'Verifying\u2026' : 'Verify & Change Password' }}\r\n                      </button>\r\n                      <button type=\"button\" class=\"cp-btn cp-btn--ghost\" *ngIf=\"canResendOtp\"\r\n                        (click)=\"changePassword(true)\" [disabled]=\"isPasswordChanging\">Resend Code</button>\r\n                      <button type=\"button\" class=\"cp-btn-link\" (click)=\"cancelPasswordChange()\">Cancel</button>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 SECTION: Business Information \u2550\u2550\u2550 -->\r\n        <div class=\"cp-card\" *ngIf=\"isBusiness\" [formGroup]=\"companyForm\">\r\n          <div class=\"cp-card__header\">\r\n            <span class=\"cp-card__icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path\r\n                  d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\" />\r\n              </svg>\r\n            </span>\r\n            <div>\r\n              <h3 class=\"cp-card__title\">Business Information</h3>\r\n              <p class=\"cp-card__sub\">Company details and branding</p>\r\n            </div>\r\n            <span class=\"cp-card__status\" [class.cp-card__status--done]=\"sectionBusinessDone\">\r\n              <svg *ngIf=\"sectionBusinessDone\" viewBox=\"0 0 24 24\">\r\n                <path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n              </svg>\r\n              <span *ngIf=\"!sectionBusinessDone\">\u2014</span>\r\n            </span>\r\n          </div>\r\n          <div class=\"cp-card__body\">\r\n            <div class=\"cp-biz-layout\">\r\n              <div class=\"cp-biz-fields\">\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyName\">Business Name <span class=\"req\">*</span></label>\r\n                    <input type=\"text\" id=\"companyName\" formControlName=\"companyName\" placeholder=\"Acme Corp\"\r\n                      [class.is-invalid]=\"c['companyName'].invalid && c['companyName'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyName'].invalid && c['companyName'].touched\">Required</div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyEmail\">Business Email <span class=\"req\">*</span></label>\r\n                    <input type=\"email\" id=\"companyEmail\" formControlName=\"companyEmail\" placeholder=\"info@acme.com\"\r\n                      [class.is-invalid]=\"c['companyEmail'].invalid && c['companyEmail'].touched\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyEmail'].invalid && c['companyEmail'].touched\">\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['required']\">Required</span>\r\n                      <span *ngIf=\"c['companyEmail'].errors?.['email']\">Invalid email</span>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"companyPhoneNumber\">Business Phone <span class=\"req\">*</span></label>\r\n                    <input type=\"tel\" id=\"companyPhoneNumber\" formControlName=\"companyPhoneNumber\"\r\n                      placeholder=\"(555) 123-4567\" maxlength=\"14\"\r\n                      [class.is-invalid]=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\"\r\n                      (input)=\"formatPhone($event, 'company')\" autocomplete=\"tel\" />\r\n                    <div class=\"cp-error\" *ngIf=\"c['companyPhoneNumber'].invalid && c['companyPhoneNumber'].touched\">\r\n                      Required</div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"cp-field\">\r\n                  <label for=\"bizAddress1\">Business Address</label>\r\n                  <input type=\"text\" id=\"bizAddress1\" formControlName=\"address1\" placeholder=\"123 Business Street\"\r\n                    ngx-google-places-autocomplete [options]=\"googleOptions\"\r\n                    (onAddressChange)=\"onBusinessAddressChange($event)\" autocomplete=\"off\" />\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCity\">City</label>\r\n                    <input type=\"text\" id=\"bizCity\" formControlName=\"city\" placeholder=\"City\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizState\">State</label>\r\n                    <input type=\"text\" id=\"bizState\" formControlName=\"state\" placeholder=\"ST\" maxlength=\"2\" />\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"cp-row cp-row--3\">\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCounty\">County</label>\r\n                    <input type=\"text\" id=\"bizCounty\" formControlName=\"county\" placeholder=\"Orange County\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizZipcode\">Zip</label>\r\n                    <input type=\"text\" id=\"bizZipcode\" formControlName=\"zipcode\" placeholder=\"00000\" inputmode=\"numeric\"\r\n                      maxlength=\"5\" />\r\n                  </div>\r\n                  <div class=\"cp-field\">\r\n                    <label for=\"bizCountry\">Country</label>\r\n                    <input type=\"text\" id=\"bizCountry\" formControlName=\"country\" placeholder=\"US\"\r\n                      autocomplete=\"country\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Business logo -->\r\n              <div class=\"cp-biz-logo\">\r\n                <label class=\"cp-biz-logo__label\">Business Logo</label>\r\n                <div class=\"cp-biz-logo__area\" (click)=\"cpLogoInput.click()\">\r\n                  <input #cpLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"onBusinessLogoChange($event)\"\r\n                    class=\"cp-upload-hidden\" />\r\n                  <ng-container *ngIf=\"logoPreviewUrl; else logoPlaceholder\">\r\n                    <img [src]=\"logoPreviewUrl\" alt=\"Business logo\" class=\"cp-biz-logo__img\" />\r\n                    <span class=\"cp-biz-logo__change\">Change</span>\r\n                  </ng-container>\r\n                  <ng-template #logoPlaceholder>\r\n                    <div class=\"cp-biz-logo__placeholder\">\r\n                      <svg viewBox=\"0 0 24 24\">\r\n                        <path\r\n                          d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\" />\r\n                      </svg>\r\n                      <span>Upload Logo</span>\r\n                      <small>PNG \u00B7 JPG</small>\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \u2550\u2550\u2550 Footer: Terms + Submit \u2550\u2550\u2550 -->\r\n        <div class=\"cp-form-footer\">\r\n          <div class=\"cp-terms\">\r\n            <label class=\"cp-terms__label\">\r\n              <input type=\"checkbox\" class=\"cp-terms__check\" [checked]=\"model.acceptTerms && model.privacy\"\r\n                (change)=\"onTermsCheckboxChange($event)\" />\r\n              <span class=\"cp-terms__box\"></span>\r\n              <span>I accept the\r\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Terms and Conditions', $event)\">Terms &amp;\r\n                  Conditions</a>\r\n                and\r\n                <a href=\"#\" (click)=\"openModal(termsAndConditionsModel, 'Privacy Statement', $event)\">Privacy Policy</a>\r\n              </span>\r\n            </label>\r\n            <div class=\"cp-error cp-terms-error\" *ngIf=\"(!model.acceptTerms || !model.privacy) && validatePage === 1\">\r\n              You must accept the Terms and Privacy Policy to continue\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"submitError\">{{ submitError }}</div>\r\n          <div class=\"cp-error cp-submit-error\" *ngIf=\"providerError\">{{ providerError }}</div>\r\n\r\n          <button type=\"submit\" class=\"cp-btn cp-btn--submit\" [disabled]=\"isSubmitting\">\r\n            <span *ngIf=\"isSubmitting\" class=\"cp-spinner cp-spinner-btn\"></span>\r\n            <svg *ngIf=\"!isSubmitting\" viewBox=\"0 0 24 24\" style=\"width:18px;height:18px\">\r\n              <path *ngIf=\"userHasExistingDetails\"\r\n                d=\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z\"\r\n                fill=\"#fff\" />\r\n              <path *ngIf=\"!userHasExistingDetails\" d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" fill=\"#fff\" />\r\n            </svg>\r\n            {{ uploadStatus || (isSubmitting ? 'Processing\u2026' : (userHasExistingDetails ? 'Save Changes' : 'Activate My\r\n            Account')) }}\r\n          </button>\r\n        </div>\r\n\r\n      </form>\r\n    </div>\r\n\r\n  </main>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Terms & Privacy Modal \u2500\u2500\u2500 -->\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n    <div class=\"modal-content tc-modal\">\r\n      <div class=\"tc-modal-header\">\r\n        <div class=\"tc-header-icon\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\" />\r\n            <polyline points=\"14 2 14 8 20 8\" />\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" />\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" />\r\n          </svg>\r\n        </div>\r\n        <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n        <button type=\"button\" class=\"tc-modal-close\" (click)=\"closeModal()\" aria-label=\"Close\">\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n      <div class=\"tc-modal-body\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle === 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\r\n            [branding]=\"branding\"></app-terms-conditions>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"termsAndConditionTitle !== 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\"\r\n            [branding]=\"branding\"></app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"tc-modal-footer\">\r\n        <button type=\"button\" class=\"tc-btn tc-btn-close\" (click)=\"closeModal()\">Close</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-page{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0c1620}@media (max-width: 860px){.cp-page{flex-direction:column}}.cp-page--brand{display:flex;min-height:100vh;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif}@media (max-width: 860px){.cp-page--brand{flex-direction:column}}.cp-brand-left{width:42%;min-width:320px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:10px 48px;position:sticky;top:20px;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-brand-left{position:static;height:auto;width:100%;min-width:unset;padding:32px 24px 28px;border-right:none;border-bottom:1px solid #e2eaf2}}.cp-brand-logo-wrap{margin-bottom:10px}.cp-brand-logo-img{max-height:48px;max-width:200px;object-fit:contain;display:block}.cp-brand-logo-svg{display:block;height:48px;width:auto;max-width:200px;fill:#4077ad}.cp-brand-logo-text{font-size:20px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-brand-hero{margin-bottom:15px}.cp-brand-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.16);border-radius:99px;padding:3px 10px;margin-bottom:16px}.cp-brand-heading{font-size:26px;font-weight:800;color:#0c1620;line-height:1.22;letter-spacing:-.4px;margin:0 0 14px}@media (max-width: 860px){.cp-brand-heading{font-size:21px}}.cp-brand-intro{font-size:14px;color:#6b7c8a;line-height:1.78;margin:0}.cp-brand-features{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}.cp-brand-feature{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:9px;background:#f8fafc;border:1px solid #e8edf3;transition:border-color .18s,background .18s}.cp-brand-feature:hover{background:#4077ad08;border-color:#4077ad38}.cp-brand-feature__icon{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-brand-feature__icon svg{width:17px;height:17px}.cp-brand-feature__icon svg path{fill:#4077ad}.cp-brand-feature__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-brand-feature__body strong{font-size:14px;font-weight:700;color:#0c1620;line-height:1.2}.cp-brand-feature__body span{font-size:12px;color:#6b7c8a;line-height:1.62}.cp-brand-contact{display:flex;flex-direction:column;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid #e8edf3}.cp-brand-contact__link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-brand-contact__link svg{width:14px;height:14px;flex-shrink:0}.cp-brand-contact__link svg path{fill:currentColor}.cp-brand-contact__link:hover{color:#4077ad}.cp-brand-contact__link--website{font-weight:600;color:#4077ad}.cp-brand-contact__link--website:hover{color:#335f8a}.cp-brand-contact__ext{width:11px!important;height:11px!important;opacity:.65}.cp-brand-right{flex:1;background:#eef1f4;display:flex;align-items:center;justify-content:center;padding:40px 28px;min-width:0}@media (max-width: 860px){.cp-brand-right{padding:28px 20px 48px}}.cp-brand-state{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}.cp-brand-state .cp-invalid-card,.cp-brand-state .cp-anf-card{width:100%}.cp-left{width:40%;min-width:300px;background:#fff;border-right:1px solid #e2eaf2;display:flex;flex-direction:column;padding:44px 40px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1dce6 transparent}@media (max-width: 860px){.cp-left{display:none}}.cp-left-inner{display:flex;flex-direction:column;height:100%;gap:0}.cp-logo{margin-bottom:24px}.cp-logo-img{max-height:44px;max-width:180px;object-fit:contain;display:block}.cp-logo-fallback{font-size:18px;font-weight:800;color:#4077ad;letter-spacing:-.5px}.cp-sb-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:6px;background:#4077ad0d;border:1px solid rgba(64,119,173,.12);margin-bottom:20px}.cp-sb-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#4077ad;display:flex;align-items:center;justify-content:center;overflow:hidden}.cp-sb-avatar__img{width:100%;height:100%;object-fit:cover}.cp-sb-avatar__initials{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.cp-sb-user__info{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-sb-user__info strong{font-size:14px;font-weight:700;color:#0c1620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-user__info span{font-size:12px;color:#6b7c8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sb-signout{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;margin-top:20px;margin-bottom:4px;background:transparent;border:1.5px solid #e2eaf2;border-radius:6px;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}.cp-sb-signout svg{width:16px;height:16px;flex-shrink:0}.cp-sb-signout svg path{fill:#6b7c8a}.cp-sb-signout:hover{border-color:#f87171;color:#dc2626;background:#dc26260a}.cp-sb-signout:hover svg path{fill:#dc2626}.cp-sb-hero{margin-bottom:16px}.cp-sb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4077ad;margin-bottom:6px}.cp-sb-intro{font-size:14px;line-height:1.6;color:#6b7c8a;margin:0}.cp-sb-progress{margin-bottom:20px}.cp-sb-progress__bar{height:5px;background:#e2eaf2;border-radius:99px;overflow:hidden;margin-bottom:5px}.cp-sb-progress__fill{height:100%;background:linear-gradient(90deg,#4077ad,#5b9fd4);border-radius:99px;transition:width .4s ease;min-width:4px}.cp-sb-progress__label{font-size:12px;font-weight:600;color:#6b7c8a}.cp-sb-features{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}.cp-sb-feature{display:flex;align-items:flex-start;gap:10px}.cp-sb-feature__icon{width:28px;height:28px;border-radius:6px;background:#4077ad14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-sb-feature__icon svg{width:15px;height:15px}.cp-sb-feature__icon svg path{fill:#4077ad}.cp-sb-feature div{display:flex;flex-direction:column;gap:2px}.cp-sb-feature div strong{font-size:14px;font-weight:700;color:#0c1620}.cp-sb-feature div span{font-size:12px;color:#6b7c8a;line-height:1.5}.cp-steps{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;position:relative}.cp-steps:before{content:\"\";position:absolute;left:17px;top:20px;width:2px;bottom:20px;background:#e2eaf2;z-index:0}.cp-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;position:relative;z-index:1}.cp-step__icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;border:2px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}.cp-step__icon svg{width:15px;height:15px}.cp-step__icon svg path{fill:#6b7c8a;transition:fill .2s}.cp-step__body{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:5px;min-width:0}.cp-step__label{font-size:14px;font-weight:700;color:#0c1620;line-height:1}.cp-step__sub{font-size:12px;color:#6b7c8a;line-height:1.4}.cp-step__badge{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:7px;background:#d3dce3;display:flex;align-items:center;justify-content:center;transition:background .2s}.cp-step__badge svg{width:12px;height:12px}.cp-step__badge svg path{fill:#fff}.cp-step__badge span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-step__badge--done{background:#28a745}.cp-step__badge--done span{display:none}.cp-step--done .cp-step__icon{background:#4077ad14;border-color:#4077ad}.cp-step--done .cp-step__icon svg path{fill:#4077ad}.cp-step--done .cp-step__label{color:#4077ad}.cp-left-contact{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf3}.cp-contact-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b7c8a;text-decoration:none;transition:color .15s}.cp-contact-link svg{width:14px;height:14px;flex-shrink:0}.cp-contact-link svg path{fill:currentColor}.cp-contact-link:hover{color:#4077ad}.cp-left-footnote{margin-top:18px;font-size:12.5px}.cp-left-footnote a{display:inline-flex;align-items:center;gap:5px;color:#4077ad;text-decoration:none;font-weight:600;transition:color .15s}.cp-left-footnote a svg{width:12px;height:12px}.cp-left-footnote a svg path{fill:#4077ad}.cp-left-footnote a:hover{color:#335f8a;text-decoration:underline}.cp-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #e2eaf2}@media (max-width: 860px){.cp-mobile-bar{display:flex}}.cp-mobile-logo{max-height:36px;max-width:160px;object-fit:contain}.cp-mobile-company{font-size:18px;font-weight:800;color:#4077ad}.cp-right{flex:1;background:#f0f4f8;display:flex;flex-direction:column;align-items:center;padding:0 0 64px;overflow-y:auto;min-width:0}@media (max-width: 860px){.cp-right{padding:0 0 48px}}.cp-invalid-page,.cp-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef1f4;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:24px}.cp-invalid-card,.cp-success-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;padding:52px 44px;max-width:440px;width:100%;text-align:center}.cp-invalid-card h2,.cp-success-card h2{font-size:18px;font-weight:800;color:#0c1620;margin-bottom:12px}.cp-invalid-card p,.cp-success-card p{font-size:14px;color:#6b7c8a;line-height:1.7;margin-bottom:28px}.cp-invalid-icon,.cp-success-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.cp-invalid-icon svg,.cp-success-icon svg{width:32px;height:32px}.cp-invalid-icon{background:#dc35451a}.cp-invalid-icon svg path{fill:#dc3545}.cp-invalid-icon--warn{background:#f59e0b1a}.cp-invalid-icon--warn svg path{fill:#f59e0b}.cp-success-icon{background:#28a7451a}.cp-success-icon svg path{fill:#28a745}.cp-anf-hint{font-size:13px;color:#6b7280;margin-top:4px}.cp-form-wrap{width:100%;flex:1;display:flex;flex-direction:column;gap:0;padding-bottom:32px}.cp-banner{width:100%;display:flex;align-items:center;gap:20px;padding:20px 32px;background:linear-gradient(135deg,#4077ad,#2f5880);border-bottom:1px solid rgba(0,0,0,.12);position:sticky;top:0;z-index:10;flex-shrink:0}@media (max-width: 860px){.cp-banner{padding:16px 20px;position:static}}@media (max-width: 480px){.cp-banner{padding:14px 16px;gap:12px}}.cp-banner__avatar{position:relative;flex-shrink:0;width:60px;height:60px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);overflow:hidden;background:#ffffff26}@media (max-width: 480px){.cp-banner__avatar{width:46px;height:46px}}.cp-banner__img{width:100%;height:100%;object-fit:cover;display:block}.cp-banner__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#ffffffe6;text-transform:uppercase;letter-spacing:-.5px}@media (max-width: 480px){.cp-banner__initials{font-size:16px}}.cp-banner__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.cp-banner__name{font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media (max-width: 480px){.cp-banner__name{font-size:14px}}.cp-banner__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cp-banner__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#fffc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-banner__email svg{width:11px;height:11px}.cp-banner__email svg path{fill:#fffc}.cp-banner__badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:99px;background:#fff3;color:#ffffffe6}.cp-banner__badge--update{background:#28a7454d;color:#a8f5c0}.cp-banner__loading{display:flex;align-items:center;gap:6px;font-size:12px;color:#ffffffb3;margin-top:2px}.cp-banner__loading .cp-spinner--sm{border-color:#fff6;border-top-color:#fff}.cp-logout-btn--banner{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#ffffffe6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn--banner svg{width:15px;height:15px}.cp-logout-btn--banner svg path{fill:#ffffffe6}.cp-logout-btn--banner:hover{background:#dc3545bf;border-color:transparent;color:#fff}.cp-logout-btn--banner:hover svg path{fill:#fff}@media (max-width: 480px){.cp-logout-btn--banner{padding:7px 10px;font-size:12px}}.cp-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin:20px 24px 0;background:#dc35450f;border:1px solid rgba(220,53,69,.18);font-size:14px;color:#c0392b}.cp-alert svg path{fill:#c0392b}.cp-card{background:#fff;border:1px solid #e2eaf2;margin:16px 24px 0;border-radius:10px;overflow:visible;box-shadow:0 1px 3px #0000000a}.cp-card:first-of-type{margin-top:20px}@media (max-width: 860px){.cp-card{margin:12px 16px 0}}@media (max-width: 480px){.cp-card{margin:10px 12px 0;border-radius:8px}}.cp-card__header{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #f0f4f8;background:#fafbfc;border-radius:10px 10px 0 0;overflow:hidden}@media (max-width: 480px){.cp-card__header{padding:14px 16px;gap:10px;border-radius:8px 8px 0 0}}.cp-card__icon{width:36px;height:36px;border-radius:8px;flex-shrink:0;background:#4077ad14;display:flex;align-items:center;justify-content:center}.cp-card__icon svg{width:18px;height:18px}.cp-card__icon svg path{fill:#4077ad}.cp-card__title{font-size:16px;font-weight:700;color:#0c1620;margin:0 0 2px;line-height:1}.cp-card__sub{font-size:12px;color:#6b7c8a;margin:0;line-height:1}.cp-card__status{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef1f4;border:1.5px solid #d3dce3;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-card__status svg{width:14px;height:14px}.cp-card__status svg path{fill:#6b7c8a}.cp-card__status span{font-size:12px;font-weight:700;color:#6b7c8a}.cp-card__status--done{background:#28a745;border-color:#28a745}.cp-card__status--done svg path{fill:#fff}.cp-card__body{padding:20px 24px 16px}@media (max-width: 480px){.cp-card__body{padding:16px 16px 12px}}.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cp-row.cp-row-triple,.cp-row.cp-row--3{grid-template-columns:1fr 1fr 1fr}.cp-row.cp-row--4{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width: 640px){.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.cp-row{grid-template-columns:1fr}.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr 1fr}}@media (max-width: 400px){.cp-row.cp-row-triple,.cp-row.cp-row--3,.cp-row.cp-row--4{grid-template-columns:1fr}}.cp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}.cp-field label{font-size:12px;font-weight:600;color:#3a4a57}.cp-field label .req{color:#4077ad;margin-left:2px}.cp-field input,.cp-field select{box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px;font-size:14px;color:#0c1620;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;font-family:inherit}.cp-field input::placeholder,.cp-field select::placeholder{color:#aab8c2}.cp-field input:focus,.cp-field select:focus{outline:none;border-color:#4077ad;box-shadow:0 0 0 3px #4077ad26}.cp-field input.is-invalid,.cp-field select.is-invalid{border-color:#dc3545}.cp-field input.is-invalid:focus,.cp-field select.is-invalid:focus{box-shadow:0 0 0 3px #dc354526}.cp-select{position:relative}.cp-select:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7c8a;pointer-events:none}.cp-select select{cursor:pointer;padding-right:32px}.cp-pw-wrap{position:relative}.cp-pw-wrap input{padding-right:42px}.cp-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;color:#6b7c8a}.cp-pw-toggle svg{width:18px;height:18px}.cp-pw-toggle svg path{fill:#6b7c8a}.cp-pw-toggle:hover svg path{fill:#4077ad}.cp-pw-success{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#16a34a;margin:4px 0 10px}.cp-pw-success svg path{fill:#16a34a}.cp-readonly-wrap{position:relative;display:flex;align-items:center}.cp-readonly-wrap svg{position:absolute;left:12px;width:15px;height:15px;flex-shrink:0;pointer-events:none}.cp-readonly-wrap svg path{fill:#4077ad}.cp-input-readonly{width:100%;box-sizing:border-box;height:42px;border:1.5px solid #d3dce3;border-radius:6px;padding:0 12px 0 36px;font-size:13.5px;color:#0c1620;background:#4077ad0a;cursor:default;font-family:inherit;font-weight:500}.cp-autofill-note{font-size:11px;color:#4077ad;margin-top:3px;display:flex;align-items:center;gap:4px}.cp-email-display{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;background:#eef1f4;border:1.5px solid #d3dce3;border-radius:99px;font-size:12.5px;color:#0c1620;font-weight:500}.cp-email-display svg{width:14px;height:14px;flex-shrink:0}.cp-email-display svg path{fill:#4077ad}.cp-error{font-size:12px;color:#dc3545;margin-top:2px}.cp-terms-error{margin-top:4px}.cp-submit-error{margin-bottom:12px;font-size:14px;text-align:center}.cp-loading-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7c8a;margin-top:4px}.cp-new-user-hint{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#4077ad;background:#4077ad0f;border:1px solid rgba(64,119,173,.18);border-radius:6px;padding:9px 13px;margin:6px 0 12px}.cp-new-user-hint svg{width:15px;height:15px;flex-shrink:0}.cp-new-user-hint svg path{fill:#4077ad}.cp-agreements{display:flex;flex-direction:column;gap:10px;margin:24px 0 4px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #d3dce3;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#bac8d3;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eef1f4;border:1px solid #d3dce3;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:13px;font-weight:600;color:#0c1620;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:11.5px;color:#6b7c8a;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#4077ad;border-color:#4077ad;color:#fff}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:#4077ad;border:none;border-radius:6px;font-size:13.5px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit}.cp-btn:hover:not(:disabled){background:#335f8a;box-shadow:0 4px 12px #4077ad59}.cp-btn:active:not(:disabled){transform:scale(.99)}.cp-btn:disabled{opacity:.6;cursor:not-allowed}.cp-btn--submit{height:52px;font-size:15px;letter-spacing:.5px;background:linear-gradient(135deg,#4077ad,#335f8a);box-shadow:0 2px 8px #4077ad40;border-radius:8px;margin-top:0}.cp-btn--submit:hover:not(:disabled){box-shadow:0 6px 18px #4077ad66;filter:brightness(1.05)}.cp-btn--outline{background:#fff;color:#4077ad;border:1.5px solid #4077AD}.cp-btn--outline:hover:not(:disabled){background:#4077ad0d;box-shadow:none}.cp-btn--ghost{background:transparent;color:#6b7c8a;border:1.5px solid #d3dce3}.cp-btn--ghost:hover:not(:disabled){border-color:#4077ad;color:#4077ad;box-shadow:none}.cp-btn--sm{height:38px;font-size:12.5px}.cp-btn-link{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;margin-top:8px;padding:6px 0;text-decoration:underline}.cp-btn-link:hover{color:#4077ad}.cp-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}.cp-spinner:not(.cp-spinner-btn){border-color:#4077ad4d;border-top-color:#4077ad}.cp-spinner--sm{width:11px;height:11px;border-color:#4077ad4d;border-top-color:#4077ad}@keyframes cp-spin{to{transform:rotate(360deg)}}.cp-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;background:#f8fafc;border:1px solid #e2eaf2;border-radius:6px}.cp-toggle-row__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.cp-toggle-row__label{font-size:13px;font-weight:600;color:#0c1620}.cp-toggle-row__label em{font-style:normal;font-size:11px;font-weight:500;color:#6b7c8a;margin-left:4px}.cp-toggle-row__hint{font-size:11px;color:#6b7c8a}.cp-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}.cp-toggle-switch input{opacity:0;width:0;height:0;position:absolute}.cp-toggle-switch input:checked+.cp-toggle-knob{background:#4077ad}.cp-toggle-switch input:checked+.cp-toggle-knob:before{transform:translate(18px)}.cp-toggle-knob{position:absolute;inset:0;background:#c8d5e0;border-radius:24px;transition:background .2s;cursor:pointer}.cp-toggle-knob:before{content:\"\";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.cp-otp-wrap{margin-top:4px}.cp-otp-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7c8a;margin:0 0 12px}.cp-otp-hint svg path{fill:#6b7c8a}.cp-otp-hint strong{color:#0c1620}.cp-otp-timer{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#4077ad;background:#4077ad12;border:1px solid rgba(64,119,173,.18);border-radius:99px;padding:4px 12px;margin-bottom:14px}.cp-otp-timer svg path{fill:#4077ad}.cp-otp-timer--expired{color:#dc3545;background:#dc354512;border-color:#dc354533}.cp-otp-timer--expired svg path{fill:#dc3545}.cp-otp-input{letter-spacing:.15em;font-size:16px;font-weight:600}.cp-otp-actions{display:flex;flex-direction:column;gap:0;margin-top:4px}.cp-pending-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;margin-bottom:16px;background:#4077ad0d;border:1px solid rgba(64,119,173,.18);border-radius:6px;font-size:12px;font-weight:600;color:#4077ad;line-height:1.55}.cp-pending-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}.cp-pending-notice svg path{fill:#4077ad}.cp-fields-pending{opacity:.42;pointer-events:none;filter:blur(.4px);-webkit-user-select:none;user-select:none}.cp-anf-role-preview{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;margin-bottom:4px;background:#4077ad08;border:1px solid rgba(64,119,173,.14);border-radius:8px}.cp-anf-role-preview .cp-role-card{width:110px;pointer-events:none}.cp-anf-role-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b7c8a}.cp-role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:6px}@media (max-width: 480px){.cp-role-cards{grid-template-columns:repeat(3,1fr)}}.cp-role-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border:2px solid #d3dce3;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-user-select:none;user-select:none}.cp-role-card:hover{border-color:#4077ad;box-shadow:0 2px 8px #4077ad1f}.cp-role-card--selected{border-color:#4077ad;background:#4077ad0d;box-shadow:0 0 0 3px #4077ad26}.cp-role-card__img{position:relative;width:48px;height:48px}.cp-role-card__img img{width:100%;height:100%;object-fit:contain}.cp-role-card__check{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#4077ad;display:flex;align-items:center;justify-content:center}.cp-role-card__check svg{width:11px;height:11px}.cp-role-card__check svg path{fill:#fff}.cp-role-card__name{font-size:11px;font-weight:600;color:#0c1620;text-align:center;line-height:1.3}.cp-role-card--disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.cp-role-card--disabled:hover{border-color:#d3dce3;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected{border-color:#6b7c8a;background:#f8fafc;box-shadow:none}.cp-role-cards--locked .cp-role-card--selected .cp-role-card__check{background:#6b7c8a}.cp-role-locked-notice{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:99px;background:#f59e0b14;border:1px solid rgba(245,158,11,.25);font-size:11.5px;font-weight:600;color:#92400e}.cp-role-locked-notice svg{width:13px;height:13px;flex-shrink:0}.cp-role-locked-notice svg path{fill:#92400e}.cp-role-locked-notice.cp-role-preassigned-notice{background:#2563eb0f;border-color:#2563eb38;color:#1e40af}.cp-role-locked-notice.cp-role-preassigned-notice svg path{fill:#2563eb}.cp-role-cards--preassigned{display:flex;justify-content:flex-start;gap:0;margin-top:8px}.cp-role-cards--preassigned .cp-role-card--preassigned{width:140px;cursor:default;pointer-events:none;border-color:#2563eb;background:#2563eb0a;box-shadow:0 0 0 3px #2563eb1f}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__check{background:#2563eb}.cp-role-cards--preassigned .cp-role-card--preassigned .cp-role-card__name{color:#1e40af;font-weight:700}.cp-form-footer{margin:16px 24px 0;background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}@media (max-width: 860px){.cp-form-footer{margin:12px 16px 0}}@media (max-width: 480px){.cp-form-footer{margin:10px 12px 0;padding:16px;border-radius:8px}}.cp-terms{margin:0 0 16px}.cp-terms__label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;color:#6b7c8a;line-height:1.7;margin:0}.cp-terms__label a{color:#4077ad;text-decoration:underline;font-weight:600}.cp-terms__label a:hover{color:#335f8a}.cp-terms__check{position:absolute;opacity:0;width:0;height:0}.cp-terms__box{width:17px;height:17px;flex-shrink:0;margin-top:2px;border:2px solid #d3dce3;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;position:relative}.cp-terms__box:after{content:\"\";display:none;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.cp-terms__check:checked~.cp-terms__box{background:#4077ad;border-color:#4077ad}.cp-terms__check:checked~.cp-terms__box:after{display:block}.cp-upload-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:2px dashed #d3dce3;border-radius:6px;background:#eef1f4;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.cp-upload-area:hover{border-color:#4077ad;background:#4077ad08}.cp-upload-hidden{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.cp-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;pointer-events:none}.cp-upload-placeholder svg{width:32px;height:32px;opacity:.5}.cp-upload-placeholder svg path{fill:#6b7c8a}.cp-upload-placeholder span{font-size:12.5px;font-weight:600;color:#6b7c8a}.cp-upload-placeholder small{font-size:11px;color:#95a2ad}.cp-upload-preview{width:100%;object-fit:cover;display:block}.cp-upload-preview--avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px #0000001f;margin:14px auto 0}.cp-upload-preview--logo{max-width:180px;max-height:80px;width:auto;height:auto;object-fit:contain;margin:14px auto 0}.cp-upload-change{font-size:11px;font-weight:600;color:#4077ad;margin-bottom:10px;pointer-events:none}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;gap:13px;padding:20px 24px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:38px;height:38px;background:#ffffff1f;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#93c5fd;flex-shrink:0}.tc-modal-header .tc-modal-title{font-size:16px;font-weight:700;color:#fff;margin:0;flex:1}.tc-modal-close{flex-shrink:0;background:#ffffff1f;border:none;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fffc;cursor:pointer;transition:background .15s,color .15s}.tc-modal-close:hover{background:#ffffff38;color:#fff}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:background .15s ease}.tc-btn.tc-btn-close{background:#4077ad;color:#fff}.tc-btn.tc-btn-close:hover{background:#335f8a}.cp-logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1.5px solid #e2eaf2;background:#fff;font-size:12.5px;font-weight:600;color:#6b7c8a;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.cp-logout-btn svg{width:16px;height:16px}.cp-logout-btn svg path{fill:#6b7c8a}.cp-logout-btn:hover{border-color:#dc3545;color:#dc3545}.cp-logout-btn:hover svg path{fill:#dc3545}.cp-logout-btn--mobile{margin-left:auto}.cp-biz-layout{display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:start}@media (max-width: 640px){.cp-biz-layout{grid-template-columns:1fr}}.cp-biz-fields{display:flex;flex-direction:column}.cp-biz-logo{display:flex;flex-direction:column;gap:8px}.cp-biz-logo__label{font-size:11.5px;font-weight:600;color:#3a4a57}.cp-biz-logo__area{border:2px dashed #d3dce3;border-radius:6px;background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;padding:12px;text-align:center;transition:border-color .15s}.cp-biz-logo__area:hover{border-color:#4077ad}.cp-biz-logo__img{width:100%;max-height:100px;object-fit:contain;border-radius:4px}.cp-biz-logo__change{font-size:11px;color:#6b7c8a;margin-top:6px;display:block}.cp-biz-logo__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px}.cp-biz-logo__placeholder svg{width:28px;height:28px}.cp-biz-logo__placeholder svg path{fill:#aab8c2}.cp-biz-logo__placeholder span{font-size:11.5px;font-weight:600;color:#6b7c8a}.cp-biz-logo__placeholder small{font-size:10px;color:#aab8c2}.cp-profile-logo-area{border-radius:50%!important;min-height:140px!important;width:140px!important;height:140px!important;margin:0 auto;overflow:hidden;padding:0!important;position:relative}.cp-profile-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.cp-profile-logo-area .cp-biz-logo__change{position:absolute;bottom:0;left:0;right:0;background:#0000007a;color:#fff!important;padding:7px 0 5px;text-align:center;font-size:10.5px;font-weight:600;margin-top:0!important;opacity:0;transition:opacity .18s}.cp-profile-logo-area:hover .cp-biz-logo__change{opacity:1}.cp-lookup-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 44px!important}.cp-lookup-loading p{font-size:14px;color:#6b7c8a;margin:0}.cp-lookup-spinner{width:32px;height:32px;border:3px solid rgba(64,119,173,.2);border-top-color:#4077ad}.cp-anf-card{width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #00000012,0 16px 40px -4px #0c16201f;border:1px solid #e2eaf2}.cp-anf-card__header{display:flex;align-items:center;gap:16px;padding:28px 28px 20px;border-bottom:1px solid #f0f4f8}.cp-anf-card__identity{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.cp-anf-card__name{font-size:18px;font-weight:800;color:#0c1620;margin:0;line-height:1.2}.cp-anf-card__email{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7c8a}.cp-anf-card__email svg{width:12px;height:12px}.cp-anf-card__email svg path{fill:#6b7c8a}.cp-anf-card__details{padding:16px 28px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #f0f4f8}.cp-anf-card__notice{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#4077ad0a;border-bottom:1px solid #f0f4f8;font-size:13px;color:#4077ad;font-weight:600}.cp-anf-card__notice svg{width:18px;height:18px;flex-shrink:0}.cp-anf-card__notice svg path{fill:#4077ad}.cp-anf-avatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4077ad,#335f8a);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:-.5px}.cp-anf-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cp-anf-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;background:#4077ad14;color:#4077ad;border:1px solid rgba(64,119,173,.18)}.cp-anf-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#6b7c8a;line-height:1.5}.cp-anf-detail svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}.cp-anf-detail svg path{fill:#6b7c8a}.cp-anf-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;padding:0 24px;background:linear-gradient(135deg,#4077ad,#335f8a);border:none;border-radius:0;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .15s,box-shadow .15s;-webkit-appearance:none}.cp-anf-signin-btn svg{width:18px;height:18px;flex-shrink:0}.cp-anf-signin-btn svg path{fill:#fff}.cp-anf-signin-btn:hover{filter:brightness(1.07);box-shadow:inset 0 -3px #00000026}::ng-deep .modal-content{background:none!important;border:none!important}::ng-deep .ng-select div,.ng-select input,.ng-select span{font-size:12px!important}\n"] }]
         }], ctorParameters: () => [{ type: i7.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ClaimProcessService }, { type: i1$1.BsModalService }, { type: i1$3.TokenService }, { type: i1$3.AuthLogoutService }, { type: IndustryService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]