Client-stepper: pre-fill existing KYC/address proofs in edit, fix identifier saves

Edit-mode now shows the previously selected KYC document type + uploaded file thumbnail
(loads from /clients/{id}/identifiers + /client_identifiers/{id}/documents). Same for
address proof on the India address step. Closes the gap where editing a client showed
an empty file picker even when proof had been uploaded on create.

Identifier-save hardened across all three callsites (create-client, edit-client,
identities-tab.createIdentifierWithDocs) - the KYC chip picker proofId is a CODE
string ('AADHAAR'), but backend ClientIdentifierRequest.documentTypeId is Long, which
Spring rejects with HttpMessageNotReadableException -> 400. resolveDocumentTypeId
helper looks up the code against /kyc/proof-types?type=id and substitutes the numeric
CodeValue id before posting. Skips silently for constitution-specific non-individual
docs that have no CodeValue mapping.

KYC payload normalises panNumber / enterprisePan / gstinNumber / cinNumber via
toUpperCase + whitespace strip so user-typed lowercase or trailing spaces don't trip
the backend regex (validation.msg.CLIENTKYC.panNumber.does.not.match.regexp).

State name match in client-address save now normalises both sides (lowercase, collapse
underscores + spaces) so legacy MADHYA_PRADESH resolves to 'Madhya Pradesh' returned
by api.postalpincode.in. Backed by tenant migration 0297.

Identities-tab resolver flattened - was returning identifiers before the per-row
forkJoin(getClientIdentificationDocuments) completed, so the view rendered empty
documents arrays. Now uses switchMap + forkJoin so the resolver awaits completion.

Also bundles concurrent work-in-progress on letter-mgmt, organization, users,
bank-calendar, shell, nominee/notes/identifier dialogs, and theming.

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

src/main.scss

@@ -71,6 +71,15 @@
   grid-template-columns: repeat(4, 1fr) !important;
 }
 
+.reconciliation-mega-panel {
+  max-width: 1100px !important;
+}
+
+.reconciliation-grid {
+  grid-template-columns: repeat(5, minmax(190px, 1fr)) !important;
+  min-width: 1040px;
+}
+
 // ===== Material Select Panel Styles (Material Design 3) =====
 .mat-mdc-select-panel {
   background: var(--md-sys-color-surface-container, #fff);
@@ -1105,3 +1114,207 @@ mat-card {
     overflow: hidden !important;
   }
 }
+
+/* ═══════════════════════════════════════════════════════════════
+   Client stepper — disabled (read-only) form-field overrides
+   ─── Applied GLOBALLY so they bypass component view-encapsulation.
+        `::ng-deep` inside a component SCSS sometimes loses specificity
+        battles with Material 3's MDC token cascade — a global rule scoped
+        to the stepper's component selectors avoids that entirely.
+   ═══════════════════════════════════════════════════════════════ */
+mifosx-client-general-step,
+mifosx-client-india-address-step,
+mifosx-client-address-step,
+mifosx-client-kyc-step,
+mifosx-client-entity-kyc-step,
+mifosx-client-family-members-step,
+mifosx-client-datatable-step {
+  /* Token-level overrides — these are the colours MDC reads when computing
+     disabled state. Forcing them at the host avoids fighting MDC rule by rule. */
+  --mdc-outlined-text-field-disabled-input-text-color: #0f172a;
+  --mdc-outlined-text-field-disabled-label-text-color: #64748b;
+  --mdc-outlined-text-field-disabled-outline-color: #cbd5e1;
+  --mdc-outlined-text-field-disabled-supporting-text-color: #64748b;
+  --mdc-outlined-text-field-disabled-leading-icon-color: #475569;
+  --mdc-outlined-text-field-disabled-trailing-icon-color: #475569;
+  --mdc-filled-text-field-disabled-input-text-color: #0f172a;
+  --mdc-filled-text-field-disabled-label-text-color: #64748b;
+  --mat-select-disabled-trigger-text-color: #0f172a;
+  --mat-form-field-disabled-input-text-color: #0f172a;
+  --mat-form-field-disabled-input-text-placeholder-color: #64748b;
+
+  .mat-mdc-form-field.mat-form-field-disabled,
+  .mat-mdc-form-field-disabled {
+    opacity: 1 !important;
+
+    .mat-mdc-input-element,
+    input.mat-mdc-input-element,
+    textarea.mat-mdc-input-element {
+      color: #0f172a !important;
+      -webkit-text-fill-color: #0f172a !important;
+      font-weight: 600;
+      caret-color: transparent;
+      opacity: 1 !important;
+    }
+
+    .mat-mdc-floating-label,
+    .mdc-floating-label,
+    .mat-mdc-form-field-required-marker {
+      color: #64748b !important;
+      opacity: 1 !important;
+    }
+
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
+      border-color: #cbd5e1 !important;
+    }
+
+    .mat-mdc-select-value,
+    .mat-mdc-select-value-text,
+    .mat-mdc-select-min-line,
+    .mat-mdc-select-placeholder {
+      color: #0f172a !important;
+      -webkit-text-fill-color: #0f172a !important;
+      font-weight: 600;
+      opacity: 1 !important;
+    }
+
+    .mat-mdc-select-arrow {
+      color: #94a3b8 !important;
+    }
+
+    .mat-mdc-form-field-icon-prefix,
+    .mat-mdc-form-field-icon-suffix,
+    .field-prefix-icon mat-icon,
+    .mat-mdc-form-field-icon-prefix mat-icon,
+    .mat-mdc-form-field-icon-suffix mat-icon {
+      color: #475569 !important;
+      opacity: 1 !important;
+    }
+
+    .mat-mdc-form-field-hint {
+      color: #64748b !important;
+      opacity: 1 !important;
+    }
+  }
+
+  /* The disabled mat-select element itself (sibling of mat-form-field-disabled
+     in some Material 3 builds) — drop the opacity drop. */
+  .mat-mdc-select-disabled,
+  .mat-mdc-select-disabled .mat-mdc-select-trigger,
+  .mat-mdc-select-disabled .mat-mdc-select-value,
+  .mat-mdc-select-disabled .mat-mdc-select-value-text,
+  .mat-mdc-select-disabled .mat-mdc-select-min-line {
+    color: #0f172a !important;
+    -webkit-text-fill-color: #0f172a !important;
+    font-weight: 600;
+    opacity: 1 !important;
+  }
+
+  /* MDC text-field root with its own disabled modifier */
+  .mdc-text-field--disabled {
+    opacity: 1 !important;
+
+    .mdc-text-field__input,
+    input,
+    textarea,
+    .mat-mdc-select-min-line {
+      color: #0f172a !important;
+      -webkit-text-fill-color: #0f172a !important;
+      opacity: 1 !important;
+    }
+  }
+
+  /* Native UA stylesheet — Chrome/Safari force `-webkit-text-fill-color: rgb(84,84,84)`
+     on any disabled control. This beats `color`, so reset both. */
+  input:disabled,
+  select:disabled,
+  textarea:disabled {
+    color: #0f172a !important;
+    -webkit-text-fill-color: #0f172a !important;
+    opacity: 1 !important;
+  }
+
+  /* Disabled checkboxes — Material 3's MDC checkbox uses `border-color` to
+     paint the filled box (not `background-color`), so we force BOTH and also
+     target the SVG path's stroke for the tick. Specificity is bumped via
+     chained selectors to beat MDC's own rules. */
+
+  /* Checked + disabled — solid green box, white tick */
+  mat-checkbox.mat-mdc-checkbox.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled
+    .mdc-checkbox
+    .mdc-checkbox__background,
+  .mat-mdc-checkbox.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background,
+  .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background,
+  .mat-mdc-checkbox-disabled .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
+  .mdc-checkbox--selected.mdc-checkbox--disabled .mdc-checkbox__background {
+    background-color: #059669 !important;
+    border-color: #059669 !important;
+    opacity: 1 !important;
+  }
+
+  /* Tick (white SVG path) */
+  mat-checkbox.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark,
+  mat-checkbox.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark-path,
+  .mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__checkmark-path {
+    color: #fff !important;
+    stroke: #fff !important;
+    opacity: 1 !important;
+  }
+
+  /* Unchecked + disabled — outlined slate box (visible but empty) */
+  .mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background {
+    background-color: transparent !important;
+    border-color: #94a3b8 !important;
+    opacity: 1 !important;
+  }
+
+  /* Full opacity at every layer of MDC's checkbox tree */
+  mat-checkbox.mat-mdc-checkbox-disabled,
+  .mat-mdc-checkbox-disabled,
+  .mat-mdc-checkbox-disabled .mdc-checkbox,
+  .mat-mdc-checkbox-disabled .mdc-checkbox__ripple,
+  .mat-mdc-checkbox-disabled .mdc-form-field {
+    opacity: 1 !important;
+  }
+
+  /* Label */
+  .mat-mdc-checkbox-disabled .mdc-form-field > label,
+  .mat-mdc-checkbox-disabled .mat-mdc-checkbox-label,
+  .mat-mdc-checkbox-disabled .mdc-label {
+    color: #0f172a !important;
+    opacity: 1 !important;
+    font-weight: 500;
+  }
+}
+
+/* Token-level overrides at :root so they cascade EVERYWHERE under the stepper
+   (MDC sometimes reads tokens at the component root, which lives outside our
+   `mifosx-client-*-step` host element). Limiting to a class scope to avoid
+   bleeding into other parts of the app. Descendant variants intentionally
+   use `*` so the CSS variables are picked up by Material's deeply nested
+   host elements. */
+/* stylelint-disable selector-max-universal */
+mifosx-client-general-step,
+mifosx-client-india-address-step,
+mifosx-client-address-step,
+mifosx-client-kyc-step,
+mifosx-client-entity-kyc-step,
+mifosx-client-family-members-step,
+mifosx-client-datatable-step,
+mifosx-client-general-step *,
+mifosx-client-india-address-step *,
+mifosx-client-address-step *,
+mifosx-client-kyc-step *,
+mifosx-client-entity-kyc-step *,
+mifosx-client-family-members-step *,
+mifosx-client-datatable-step * {
+  --mdc-checkbox-disabled-selected-icon-color: #059669;
+  --mdc-checkbox-disabled-unselected-icon-color: #94a3b8;
+  --mdc-checkbox-selected-icon-color: #059669;
+  --mdc-checkbox-selected-focus-icon-color: #059669;
+  --mdc-checkbox-selected-hover-icon-color: #059669;
+  --mdc-checkbox-selected-pressed-icon-color: #059669;
+}
+/* stylelint-enable selector-max-universal */