Dynamic search

web/static/css/style.css

@@ -683,6 +683,113 @@ body {
     color: var(--info-color);
 }
 
+/* Search Section */
+.search-section {
+    margin-bottom: var(--space-6);
+}
+
+.search-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.search-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    max-width: 400px;
+}
+
+.search-input {
+    width: 100%;
+    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius);
+    font-size: var(--font-size-sm);
+    transition: var(--transition);
+    background: var(--white);
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
+}
+
+.search-input:not(:placeholder-shown) {
+    padding-right: var(--space-10);
+}
+
+.search-icon {
+    position: absolute;
+    left: var(--space-3);
+    color: var(--gray-400);
+    font-size: var(--font-size-sm);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.search-clear {
+    position: absolute;
+    right: var(--space-3);
+    background: transparent;
+    border: none;
+    color: var(--gray-400);
+    cursor: pointer;
+    padding: var(--space-1);
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+}
+
+.search-clear:hover {
+    color: var(--gray-600);
+    background: var(--gray-100);
+}
+
+.search-results-info {
+    font-size: var(--font-size-sm);
+    color: var(--gray-600);
+    font-weight: 500;
+}
+
+.search-results-info #memberSearchCount {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+/* No results message */
+.no-results {
+    text-align: center;
+    padding: var(--space-8) var(--space-4);
+    color: var(--gray-500);
+}
+
+.no-results i {
+    font-size: var(--font-size-3xl);
+    color: var(--gray-300);
+    margin-bottom: var(--space-4);
+}
+
+.no-results h3 {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    margin-bottom: var(--space-2);
+    color: var(--gray-700);
+}
+
+.no-results p {
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--space-4);
+}
+
+.no-results .btn {
+    margin-top: var(--space-2);
+}
+
 /* Notifications */
 .notification {
     display: flex;
@@ -1153,6 +1260,18 @@ body {
         gap: var(--space-4);
         align-items: stretch;
     }
+
+    .search-input-wrapper {
+        max-width: none;
+    }
+
+    .search-input {
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
+
+    .search-container {
+        margin-bottom: var(--space-4);
+    }
     
     .table-responsive {
         overflow-x: auto;