Filter/Sort working with renumbering afterwards

src/app/globals.css

@@ -169,6 +169,67 @@ body {
   position: sticky;
   top: 0;
   z-index: 2;
+  vertical-align: top;
+}
+
+.tree-grid .header-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.tree-grid .header-sort-btn,
+.tree-grid .header-filter-btn {
+  border: 1px solid #c4cddc;
+  background: #fff;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  padding: 0.15rem 0.35rem;
+}
+
+.tree-grid .header-sort-btn {
+  text-align: left;
+}
+
+.tree-grid .header-filter-btn.active {
+  border-color: #2563eb;
+  color: #2563eb;
+}
+
+.tree-grid .header-filter-menu {
+  position: absolute;
+  z-index: 7;
+  margin-top: 0.2rem;
+  border: 1px solid #cfd7e5;
+  background: #fff;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  width: 220px;
+  max-height: 260px;
+  overflow: auto;
+  padding: 0.35rem;
+}
+
+.tree-grid .header-filter-clear {
+  border: 1px solid #c4cddc;
+  background: #fff;
+  border-radius: 3px;
+  font-size: 0.72rem;
+  padding: 0.12rem 0.3rem;
+  margin-bottom: 0.25rem;
+}
+
+.tree-grid .header-filter-values {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.tree-grid .header-filter-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 400;
+  font-size: 0.75rem;
 }
 
 .tree-grid .num {