feat: KYC document update, FIU & AML recurring alerts integration, Sponsor DD revoke workflow, and TDS reports

src/app/risk-review/risk-review-report.component.scss

@@ -286,12 +286,61 @@
   margin-bottom: 14px;
 }
 
+/* The verdict, on the row. Colour carries the same meaning as the section it sits under, so a
+   reviewer scanning the middle of a long table does not have to look back up to the heading. */
+.rr-move {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 700;
+  white-space: nowrap;
+
+  &--up {
+    background: #fef3c7;
+    color: #92400e;
+  }
+
+  &--down {
+    background: #dbeafe;
+    color: #1e40af;
+  }
+
+  &--same {
+    background: #f1f5f9;
+    color: var(--r-g500);
+  }
+}
+
+/* A button, so the tile is reachable by keyboard and reads as the control it is. The type
+   defaults that come with that — centred text, the button font, the UA border — are undone
+   here so it still looks like the panel it replaced. */
 .rr-kpi {
+  display: block;
+  width: 100%;
   background: #fff;
   border: 1px solid var(--r-g200);
   border-left: 4px solid var(--r-navy);
   border-radius: 11px;
   padding: 12px 16px;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 1px 6px rgb(15 23 42 / 12%);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--r-blue);
+    outline-offset: 2px;
+  }
 
   &--blue {
     border-left-color: var(--r-blue);
@@ -307,6 +356,18 @@
 
   &--dim {
     border-left-color: var(--r-g300);
+    /* Nothing to narrow to, so the tile says so rather than accepting a click that does nothing. */
+    cursor: default;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  /* The filter this tile applies is currently on. */
+  &--on {
+    border-color: var(--r-navy);
+    box-shadow: inset 0 0 0 1px var(--r-navy);
   }
 }
 
@@ -502,9 +563,11 @@
   }
 
   td {
-    padding: 8px 10px;
+    padding: 11px 10px;
     border-bottom: 1px solid var(--r-g100);
-    vertical-align: top;
+    /* Middle rather than top: one cell in the row carries a two-line reason, and top alignment
+       left every other value floating against the row above it. */
+    vertical-align: middle;
   }
 
   .num {
@@ -538,6 +601,8 @@
 
   td {
     padding: 12px 16px 16px;
+    /* The expanded block is a panel, not a value, so it starts at the top of its cell. */
+    vertical-align: top;
   }
 }
 
@@ -789,6 +854,19 @@
 }
 
 /* What the report says should happen to the rating */
+/* The verdict and the sentence behind it. Wide enough that the reason wraps to two readable
+   lines instead of a narrow ragged column. */
+.rr-move-cell {
+  min-width: 250px;
+  max-width: 330px;
+}
+
+/* Just the button, so the column is only as wide as the control it holds. */
+.rr-action-cell {
+  width: 1%;
+  white-space: nowrap;
+}
+
 .rr-verdict-cell {
   min-width: 210px;
   max-width: 300px;
@@ -817,9 +895,11 @@
 }
 
 .rr-verdict-why {
-  font-size: 10.5px;
+  font-size: 11px;
+  line-height: 1.45;
   color: var(--r-g500);
-  margin-top: 2px;
+  margin-top: 4px;
+  white-space: normal;
   white-space: normal;
 }