filter

style.css

@@ -211,7 +211,7 @@ thead {
 }
 
 th {
-    padding: 1rem 1.5rem;
+    padding: 0.75rem 1rem;
     text-align: left;
     font-weight: 600;
     color: var(--dark);
@@ -220,12 +220,40 @@ th {
     top: 0;
     background: var(--light);
     z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
 th:hover {
     background: var(--hover);
 }
 
+.column-filter {
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-size: 0.8rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    background: white;
+}
+
+.column-filter:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+}
+
+.column-filter::placeholder {
+    color: #94a3b8;
+}
+
+th.filter-active .column-filter {
+    border-color: var(--primary);
+    background-color: rgba(99, 102, 241, 0.05);
+}
+
 th .sort-indicator {
     display: inline-flex;
     flex-direction: column;