Refine category select tree gutters and tighten activity charts.

Restore RTL tree lines in category dropdowns, require product category on add, and improve chart bar density with Y-axis tooltips.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/SearchableSelect.module.css

@@ -36,10 +36,12 @@
   border: none;
   outline: none;
   min-width: 0;
+  font-family: var(--font-ui);
 }
 
 .input::placeholder {
   color: var(--text-muted);
+  font-family: var(--font-ui);
 }
 
 .clearBtn {
@@ -69,30 +71,33 @@
 }
 
 .dropdown {
-  position: static;
-  margin-top: 6px;
-  max-height: none;
-  overflow: visible;
-  background: rgba(255, 255, 255, 0.95);
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
-  box-shadow: 0 8px 24px rgba(31, 38, 135, 0.12);
-  list-style: none;
-  padding: 6px;
+  box-shadow: 0 10px 28px rgba(31, 38, 135, 0.14);
   animation: dropdownIn 0.15s ease;
 }
 
-/* Alias — in-flow is the default so search results expand the parent modal. */
+.dropdownOverlay {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 120;
+  max-height: min(320px, 50vh);
+  overflow-y: auto;
+}
+
 .dropdownInFlow {
   position: static;
-  top: auto;
-  left: auto;
-  right: auto;
+  margin-top: 6px;
   max-height: none;
   overflow: visible;
-  margin-top: 6px;
   z-index: auto;
 }
 
@@ -107,12 +112,67 @@
   }
 }
 
-.option {
+.optionItem {
+  min-width: 0;
+}
+
+.optionItemGroupEnd {
+  margin-bottom: 10px;
+}
+
+.treeGutters {
   display: flex;
-  align-items: center;
-  gap: 6px;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+
+.treeGutter {
+  position: relative;
+  width: 28px;
+  flex-shrink: 0;
+}
+
+.treeGutterContinue::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
+}
+
+.treeGutterBranch::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
+}
+
+.treeGutterBranch::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0;
+  width: 22px;
+  height: 1px;
+  background: rgba(148, 163, 184, 0.55);
+  transform: translateY(-50%);
+}
+
+.treeGutterBranchLast::before {
+  bottom: 50%;
+}
+
+.option {
   width: 100%;
-  padding: 8px 12px;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0;
+  padding: 8px 10px;
   font-size: var(--field-font-size);
   font-family: var(--font-ui);
   text-align: start;
@@ -123,34 +183,35 @@
 }
 
 .optionChild {
-  border-inline-end: 2px solid rgba(var(--primary-rgb) / 0.38);
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  background: rgba(var(--primary-rgb) / 0.03);
-  padding-inline-end: 14px;
+  padding-inline-end: 4px;
 }
 
-.optionChildGroupEnd {
-  margin-bottom: 10px;
+.optionBody {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: flex-start;
+}
+
+.optionParent {
+  font-weight: 600;
 }
 
 .option:hover {
   background: rgba(var(--primary-rgb) / 0.08);
 }
 
-.optionChild:hover {
-  background: rgba(var(--primary-rgb) / 0.1);
-}
-
 .optionSelected {
   background: rgba(var(--primary-rgb) / 0.12);
   color: var(--primary);
   font-weight: 500;
 }
 
-.optionChild.optionSelected {
-  border-inline-end-color: var(--primary);
-  background: rgba(var(--primary-rgb) / 0.14);
+.optionParent.optionSelected {
+  font-weight: 600;
 }
 
 .optionEn {