feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API

- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview
- Hide Financial & Classification section for non-individual entities in personal data and preview
- Fix legal form column in clients list — fetch legalForm from client API for correct display
- Add person/business icon before client name in list rows
- Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API
- Add registration number format hint (mat-hint) based on constitution type
- Add spacing between verification row and constitution type dropdowns
- Reduce table cell padding and prevent action buttons from being clipped
- Add missing MPL-2.0 license headers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/clients/create-client/create-client.component.scss

@@ -30,6 +30,21 @@
   }
 }
 
+.client-id-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  padding: 5px 14px;
+  background: #ecfdf5;
+  color: #059669;
+  border: 1px solid #a7f3d0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: 'Roboto Mono', monospace;
+}
+
 .client-tabs {
   background: var(--md-sys-color-surface, #fff);
   border-radius: 8px;
@@ -106,3 +121,111 @@
 .cancel-btn {
   color: rgba(0, 0, 0, 0.6);
 }
+
+/* ─── Read-only tab state ─── */
+.tab-content--readonly {
+  background: #f9fafb;
+  border-radius: 8px;
+}
+
+/* ─── Tab mode toolbar ─── */
+.tab-mode-bar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 0 0;
+}
+
+.tab-mode-btn {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  height: 34px !important;
+  border-radius: 8px !important;
+  padding: 0 14px !important;
+
+  .mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.tab-mode-btn--edit {
+  background: #1074b9 !important;
+  color: #fff !important;
+}
+
+.tab-mode-btn--cancel {
+  background: #fff !important;
+  color: #ef4444 !important;
+  border: 1px solid #fca5a5 !important;
+}
+
+/* Save & Next button wrapper */
+.save-next-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.save-next-btn {
+  display: flex !important;
+  align-items: center;
+  gap: 2px;
+
+  .m-r-6 {
+    margin-right: 6px;
+    font-size: 18px;
+  }
+}
+
+.save-spinner {
+  display: inline-block;
+}
+
+.save-progress-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px !important;
+  border-radius: 0 0 4px 4px;
+
+  ::ng-deep .mdc-linear-progress__bar-inner {
+    border-color: #fff !important;
+  }
+  ::ng-deep .mdc-linear-progress__buffer-bar {
+    background-color: rgba(255, 255, 255, 0.3) !important;
+  }
+}
+
+.validation-error-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-left: 4px solid #dc2626;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #991b1b;
+
+  mat-icon {
+    color: #dc2626;
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+
+  span { flex: 1; }
+
+  button {
+    flex-shrink: 0;
+    color: #991b1b !important;
+  }
+}