fix(banking): UI cleanup and better statement parsing (#58817)

* fix(banking): reset scroll on searching accounts

* fix(banking): show only past dates in date filter

* fix(banking): clean up line heights and remove beta badge

* fix(banking): show accurate count of import progress
fix(banking): show latest 20 imports instead of 10

* fix(banking): layout sizing needs to be preserved on page change

* fix(banking): cleaner bank balance UI

* fix(banking): correctly parse Cr/Dr values in statement importer

* Update banking/src/components/features/BankReconciliation/BankBalance.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

banking/src/styles/scroll-fade.css

@@ -0,0 +1,94 @@
+/* Scroll-edge fade mask for horizontal scroll containers (the bank picker strip).
+   Ported from Raven's `scroll-fade-x`; imported by index.css, since Tailwind processes
+   `@utility` in imported files the same as in the entry file.
+
+   The scroll-timeline keyframes reveal each edge's fade only when there IS content to scroll
+   in that direction - no fade on the left edge when scrolled fully left, none on the right at
+   the end. `@property` makes the fade animate smoothly rather than jumping.
+
+   Without scroll-timeline support (Firefox) there is deliberately NO fade at all: the fade
+   vars stay at their 0px initial value and the gradient stops collapse to the edges. A static
+   both-edges fallback was tried in Raven and removed - on a container with nothing to scroll
+   it dimmed the edges anyway, promising content that didn't exist. */
+
+@property --scroll-fade-l {
+  /* length-percentage, NOT length: the fade size is min(12%, …) - a percentage. A <length>
+     property rejects that value and reverts to initial-value (0px), zeroing the fade. */
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-r {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes scroll-fade-reveal-l {
+  from {
+    --scroll-fade-l: 0px;
+  }
+
+  to {
+    --scroll-fade-l: var(--_scroll-fade-size-l);
+  }
+}
+
+@keyframes scroll-fade-reveal-r {
+  from {
+    --scroll-fade-r: var(--_scroll-fade-size-r);
+  }
+
+  to {
+    --scroll-fade-r: 0px;
+  }
+}
+
+@utility scroll-fade-x {
+  --_scroll-fade-size-l: var(--scroll-fade-l-size,
+      var(--scroll-fade-size, min(12%, calc(var(--spacing, 0.25rem) * 10))));
+  --_scroll-fade-size-r: var(--scroll-fade-r-size,
+      var(--scroll-fade-size, min(12%, calc(var(--spacing, 0.25rem) * 10))));
+  /* Eased (smoothstep) alpha ramp, sampled finely so it reads as a smooth curve, NOT fading
+     all the way to transparent: the edge floors at 0.25 (content dims, never vanishes), ramping
+     up to a full 1 for the body. The opaque end MUST be 1 or everything would be permanently
+     dimmed. Stops collapse to the edge when the size animates to 0, so the true first/last card
+     is never dimmed at rest. Tune the floor - higher (~0.4) = subtler, lower (~0.1) = stronger. */
+  --scroll-fade-inline: linear-gradient(to right,
+      rgba(0, 0, 0, 0.25) 0,
+      rgba(0, 0, 0, 0.282) calc(var(--scroll-fade-l, 0px) * 0.125),
+      rgba(0, 0, 0, 0.367) calc(var(--scroll-fade-l, 0px) * 0.25),
+      rgba(0, 0, 0, 0.487) calc(var(--scroll-fade-l, 0px) * 0.375),
+      rgba(0, 0, 0, 0.625) calc(var(--scroll-fade-l, 0px) * 0.5),
+      rgba(0, 0, 0, 0.763) calc(var(--scroll-fade-l, 0px) * 0.625),
+      rgba(0, 0, 0, 0.883) calc(var(--scroll-fade-l, 0px) * 0.75),
+      rgba(0, 0, 0, 0.968) calc(var(--scroll-fade-l, 0px) * 0.875),
+      rgba(0, 0, 0, 1) var(--scroll-fade-l, 0px),
+      rgba(0, 0, 0, 1) calc(100% - var(--scroll-fade-r, 0px)),
+      rgba(0, 0, 0, 0.968) calc(100% - var(--scroll-fade-r, 0px) * 0.875),
+      rgba(0, 0, 0, 0.883) calc(100% - var(--scroll-fade-r, 0px) * 0.75),
+      rgba(0, 0, 0, 0.763) calc(100% - var(--scroll-fade-r, 0px) * 0.625),
+      rgba(0, 0, 0, 0.625) calc(100% - var(--scroll-fade-r, 0px) * 0.5),
+      rgba(0, 0, 0, 0.487) calc(100% - var(--scroll-fade-r, 0px) * 0.375),
+      rgba(0, 0, 0, 0.367) calc(100% - var(--scroll-fade-r, 0px) * 0.25),
+      rgba(0, 0, 0, 0.282) calc(100% - var(--scroll-fade-r, 0px) * 0.125),
+      rgba(0, 0, 0, 0.25) 100%);
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-l 1ms ease-in-out,
+      scroll-fade-reveal-r 1ms ease-in-out;
+    animation-timeline: scroll(self x), scroll(self x);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing, 0.25rem) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing, 0.25rem) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+}