Redesign grid filter menu

src/app/globals.css

@@ -326,21 +326,57 @@ body {
   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;
+  width: 300px;
+  padding: 0.55rem;
+  text-align: left;
 }
 
-.tree-grid .header-filter-actions {
+.tree-grid .header-filter-title-row,
+.tree-grid .header-filter-selection-actions,
+.tree-grid .header-filter-footer,
+.tree-grid .header-filter-footer-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.4rem;
-  margin-bottom: 0.35rem;
+}
+
+.tree-grid .header-filter-title-row {
+  margin-bottom: 0.25rem;
+  font-size: 0.82rem;
+}
+
+.tree-grid .header-filter-close {
+  border: 0;
+  background: transparent;
+  color: #4b5563;
+  padding: 0.05rem 0.2rem;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.tree-grid .header-filter-selection-actions {
+  justify-content: flex-start;
+  margin: 0.4rem 0 0.3rem;
   font-size: 0.72rem;
 }
 
+.tree-grid .header-filter-selection-actions span {
+  margin-left: auto;
+  color: #4b5563;
+}
+
+.tree-grid .header-filter-selection-actions button,
+.tree-grid .header-filter-footer button {
+  border: 1px solid #c4cddc;
+  background: #fff;
+  border-radius: 3px;
+  padding: 0.18rem 0.35rem;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+
 .tree-grid .header-filter-explanation {
   margin-bottom: 0.4rem;
   color: #4b5563;
@@ -349,22 +385,23 @@ body {
   white-space: normal;
 }
 
-.tree-grid .header-filter-clear {
+.tree-grid .header-filter-search {
+  width: 100%;
   border: 1px solid #c4cddc;
-  background: #fff;
-  border-radius: 3px;
-  font-size: 0.72rem;
-  padding: 0.12rem 0.3rem;
-}
-
-.tree-grid .header-filter-clear:disabled {
-  opacity: 0.45;
+  border-radius: 4px;
+  padding: 0.3rem 0.4rem;
+  font-size: 0.76rem;
 }
 
 .tree-grid .header-filter-values {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
+  max-height: 210px;
+  overflow: auto;
+  border: 1px solid #e1e6ef;
+  border-radius: 4px;
+  padding: 0.25rem;
 }
 
 .tree-grid .header-filter-item {
@@ -375,6 +412,37 @@ body {
   font-size: 0.75rem;
 }
 
+.tree-grid .header-filter-empty {
+  padding: 0.45rem 0.25rem;
+  color: #6b7280;
+  font-size: 0.74rem;
+}
+
+.tree-grid .header-filter-footer {
+  margin-top: 0.45rem;
+}
+
+.tree-grid .header-filter-footer-actions {
+  margin-left: auto;
+}
+
+.tree-grid .header-filter-footer button.primary {
+  border-color: #2563eb;
+  background: #2563eb;
+  color: #fff;
+}
+
+.tree-grid .header-filter-footer button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.tree-grid .header-filter-warning {
+  color: #9a3412;
+  font-size: 0.7rem;
+  white-space: normal;
+}
+
 .tree-grid .num {
   text-align: right;
 }