visual changes

app.py

@@ -14,60 +14,19 @@ def strip_timestamp(name):
 
 # Static grouping mapping for the 10 general submissions.
 GROUPS = [
-    {
-        "mwoz": "20250214_193236-o1",
-        "tau_airline": "20250215_115156-tau-o1-airline",
-        "tau_retail": "20250215_121147-tau-o1-retail"
-    },
-    {
-        "mwoz": "20250131_012338-llama405",
-        "tau_airline": "20250204_144222-tau-llama-405b-airline",
-        "tau_retail": "20250205_033820-tau-llama405b-retail"
-    },
-    {
-        "mwoz": "20250130_140218-4o",
-        "tau_airline": "20250131_152503-tau-4o-airline",
-        "tau_retail": "20250131_152422-tau-4o-retail"
-    },
-    {
-        "mwoz": "20250130_183030-claude",
-        "tau_airline": "20250205_030422-tau-sonnet-airline",
-        "tau_retail": "20250131_152807-tau-sonnet-retail"
-    },
-    {
-        "mwoz": "20250131_012449-llama70",
-        "tau_airline": "20250208_024344-tau-llama70b-airline",
-        "tau_retail": "20250208_030407-tau-llama70b-retail"
-    },
-    {
-        "mwoz": "20250131_013711-qwen72b",
-        "tau_airline": "20250202_112945-qwen72b-airline",
-        "tau_retail": "20250202_140527-qwen72b-retail"
-    },
-    {
-        "mwoz": "20250130_184905-mistrallarge",
-        "tau_airline": "20250205_024823-tau-mistrallarge-airline",
-        "tau_retail": "20250205_044403-tau-mistrallarge-retail"
-    },
-    {
-        "mwoz": "20250131_010143-o1mini",
-        "tau_airline": "20250214_180731-tau-o1-mini-airline",
-        "tau_retail": "20250214_142736-tau-o1-mini-retail"
-    },
-    {
-        "mwoz": "20250130_140439-4omini",
-        "tau_airline": "20250131_152226-tau-4o-mini-airline",
-        "tau_retail": "20250131_152338-tau-4o-mini-retail"
-    },
-    {
-        "mwoz": "20250130_145202-gpt35",
-        "tau_airline": "20250131_152708-tau-gpt35-airline",
-        "tau_retail": "20250131_152610-tau-gpt35-retail"
-    }
+    {"mwoz": "20250214_193236-o1", "tau_airline": "20250215_115156-tau-o1-airline", "tau_retail": "20250215_121147-tau-o1-retail"},
+    {"mwoz": "20250131_012338-llama405", "tau_airline": "20250204_144222-tau-llama-405b-airline", "tau_retail": "20250205_033820-tau-llama405b-retail"},
+    {"mwoz": "20250130_140218-4o", "tau_airline": "20250131_152503-tau-4o-airline", "tau_retail": "20250131_152422-tau-4o-retail"},
+    {"mwoz": "20250130_183030-claude", "tau_airline": "20250205_030422-tau-sonnet-airline", "tau_retail": "20250131_152807-tau-sonnet-retail"},
+    {"mwoz": "20250131_012449-llama70", "tau_airline": "20250208_024344-tau-llama70b-airline", "tau_retail": "20250208_030407-tau-llama70b-retail"},
+    {"mwoz": "20250131_013711-qwen72b", "tau_airline": "20250202_112945-qwen72b-airline", "tau_retail": "20250202_140527-qwen72b-retail"},
+    {"mwoz": "20250130_184905-mistrallarge", "tau_airline": "20250205_024823-tau-mistrallarge-airline", "tau_retail": "20250205_044403-tau-mistrallarge-retail"},
+    {"mwoz": "20250131_010143-o1mini", "tau_airline": "20250214_180731-tau-o1-mini-airline", "tau_retail": "20250214_142736-tau-o1-mini-retail"},
+    {"mwoz": "20250130_140439-4omini", "tau_airline": "20250131_152226-tau-4o-mini-airline", "tau_retail": "20250131_152338-tau-4o-mini-retail"},
+    {"mwoz": "20250130_145202-gpt35", "tau_airline": "20250131_152708-tau-gpt35-airline", "tau_retail": "20250131_152610-tau-gpt35-retail"}
 ]
 
 def load_mwoz_results():
-    """Load mwoz results from data/mwoz_leaderboard_results.json."""
     path = os.path.join("data", "mwoz_leaderboard_results.json")
     if not os.path.exists(path):
         return []
@@ -75,28 +34,21 @@ def load_mwoz_results():
         return json.load(f)
 
 def load_tau_results():
-    """Load tau results from data/tau_leaderboard_results.json."""
     path = os.path.join("data", "tau_leaderboard_results.json")
     if not os.path.exists(path):
         return []
     with open(path, "r") as f:
         return json.load(f)
 
-def create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state):
-    """
-    Create the aggregated leaderboard DataFrame.
-    Aggregates metrics based on the selected variants, computes dynamic rank based solely on "Average Score",
-    and then sorts the DataFrame according to the current sort state.
-    """
-    # Ensure at least one variant is active.
+def create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state, search_query=""):
     if not (selected_mwoz or selected_tau_airline or selected_tau_retail):
         selected_mwoz = True
 
     mwoz_data = load_mwoz_results()
     tau_data = load_tau_results()
-    mwoz_lookup = { entry["model_name"]: entry for entry in mwoz_data }
-    tau_lookup = { entry["model_name"]: entry for entry in tau_data }
-    
+    mwoz_lookup = {entry["model_name"]: entry for entry in mwoz_data}
+    tau_lookup = {entry["model_name"]: entry for entry in tau_data}
+
     aggregated = []
     for group in GROUPS:
         metrics = {"avg_conv_consistency": 0, "avg_backend_consistency": 0, "avg_policy_completeness": 0}
@@ -140,49 +92,97 @@ def create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau
             overall_avg = (avg_conv + avg_backend + avg_policy) / 3
         else:
             avg_conv = avg_backend = avg_policy = overall_avg = 0
+
+        model_name = " / ".join(title_parts)
         
+        # Apply search filter
+        if search_query and search_query.lower() not in model_name.lower():
+            continue
+            
         aggregated.append({
-            "Model": " / ".join(title_parts),
+            "Model": model_name,
             "Average Score": round(overall_avg, 4),
             "Conversation Consistency": round(avg_conv, 4),
             "Backend Consistency": round(avg_backend, 4),
             "Policy Completeness": round(avg_policy, 4),
             "Judge Model": judge_model
         })
-    
+
     df = pd.DataFrame(aggregated)
-    # Compute dynamic Rank solely based on "Average Score" (higher = better; rank 1 is highest)
-    df["Rank"] = df["Average Score"].rank(ascending=False, method="min").astype(int)
     
-    # Sort according to sort_state (allowed columns: numeric ones)
+    # If no results found after filtering
+    if df.empty:
+        return df
+        
+    df["Rank"] = df["Average Score"].rank(ascending=False, method="min").astype(int)
+
     allowed_sort_cols = ["Average Score", "Conversation Consistency", "Backend Consistency", "Policy Completeness"]
-    sort_by = sort_state.get("sort_by") if sort_state else None
-    ascending = sort_state.get("ascending") if sort_state else True
+    
+    # Handle sort_state safely
+    if isinstance(sort_state, str):
+        try:
+            sort_state = json.loads(sort_state)
+        except:
+            sort_state = {"sort_by": "Average Score", "ascending": False}
+    
+    # Ensure sort_state is a dict
+    if not isinstance(sort_state, dict):
+        sort_state = {"sort_by": "Average Score", "ascending": False}
+    
+    sort_by = sort_state.get("sort_by", "Average Score")
+    ascending = sort_state.get("ascending", False)
+    
     if sort_by in allowed_sort_cols:
         df = df.sort_values(sort_by, ascending=ascending)
-    
-    # Reorder columns to have "Rank" as the first column.
+    else:
+        # Default sort if column not found
+        df = df.sort_values("Average Score", ascending=False)
+
     cols = df.columns.tolist()
     if "Rank" in cols:
         cols.insert(0, cols.pop(cols.index("Rank")))
     df = df[cols]
-    
+
     return df
 
 def update_sort_state(current_state, clicked_column):
     """
-    Update the sort state based on the clicked column.
-    If the same column is clicked, toggle its sort order; otherwise, set the new column with ascending order.
+    Update the sorting state based on the clicked column.
+    Handles various input formats for current_state.
     """
-    if current_state is None:
-        current_state = {"sort_by": clicked_column, "ascending": True}
-    else:
-        if current_state.get("sort_by") == clicked_column:
-            current_state["ascending"] = not current_state.get("ascending", True)
+    # Default state if nothing valid is provided
+    new_state = {"sort_by": clicked_column, "ascending": False}
+    
+    # Handle the case when current_state is a string (JSON)
+    if isinstance(current_state, str):
+        try:
+            current_state = json.loads(current_state)
+        except (json.JSONDecodeError, TypeError):
+            # If we can't parse it, return the default state
+            return new_state
+    
+    # If current_state is None or not a dict, return default
+    if not isinstance(current_state, dict):
+        return new_state
+    
+    # Now we're sure current_state is a dict
+    # Check if it has the needed keys
+    if "sort_by" in current_state:
+        if current_state["sort_by"] == clicked_column:
+            # Toggle direction for the same column
+            return {
+                "sort_by": clicked_column,
+                "ascending": not current_state.get("ascending", False)
+            }
         else:
-            current_state["sort_by"] = clicked_column
-            current_state["ascending"] = True
-    return current_state
+            # New column, default to descending (false)
+            return {
+                "sort_by": clicked_column,
+                "ascending": False
+            }
+    
+    # If we got here, current_state doesn't have the right format
+    return new_state
 
 def sort_by_avg(sort_state):
     return update_sort_state(sort_state, "Average Score")
@@ -197,10 +197,6 @@ def sort_by_policy(sort_state):
     return update_sort_state(sort_state, "Policy Completeness")
 
 def get_color_for_value(value, min_val, max_val):
-    """
-    Compute a color for a given value based on its normalized position.
-    Interpolates from red (lowest) to yellow (mid) to green (highest).
-    """
     if max_val == min_val:
         norm = 0.5
     else:
@@ -218,10 +214,9 @@ def get_color_for_value(value, min_val, max_val):
     return f"#{r:02X}{g:02X}{b:02X}"
 
 def generate_html_table(df):
-    """
-    Generate an HTML table from the DataFrame.
-    For each numeric column (except Rank), apply a text color based on its relative value.
-    """
+    if df.empty:
+        return "<div class='no-results'>No matching results found.</div>"
+        
     numeric_cols = ["Average Score", "Conversation Consistency", "Backend Consistency", "Policy Completeness"]
     col_min = {}
     col_max = {}
@@ -229,104 +224,179 @@ def generate_html_table(df):
         col_min[col] = df[col].min() if not df.empty else 0
         col_max[col] = df[col].max() if not df.empty else 0
 
-    html = "<table border='1' style='border-collapse: collapse; text-align: center; width: 100%;'>"
+    # Build a simple HTML table without borders or JavaScript sorting
+    html = "<table style='border: none; border-collapse: collapse;'>"
+    
     # Header row
     html += "<tr>"
     for col in df.columns:
-        html += f"<th style='padding: 8px;'>{col}</th>"
+        html += f"<th style='padding:8px; border: none;'>{col}</th>"
     html += "</tr>"
-
-    # Data rows
+    
+    # Table rows
     for _, row in df.iterrows():
-        html += "<tr>"
+        html += "<tr style='border: none;'>"
         for col in df.columns:
             cell_value = row[col]
-            if col in numeric_cols:  # Color numeric columns (except Rank)
+            if col in numeric_cols:
                 color = get_color_for_value(cell_value, col_min[col], col_max[col])
-                html += f"<td style='padding: 8px; color: {color};'>{cell_value}</td>"
+                html += f"<td style='padding: 8px; border: none; color: {color};'>{cell_value}</td>"
             else:
-                html += f"<td style='padding: 8px;'>{cell_value}</td>"
+                html += f"<td style='padding: 8px; border: none;'>{cell_value}</td>"
         html += "</tr>"
     html += "</table>"
+    
     return html
 
-def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state):
+def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state, search_query=""):
     """
-    Update the leaderboard by creating the aggregated DataFrame (with dynamic rank)
-    and converting it into an HTML table.
+    Update the leaderboard based on selection and sort state.
     """
-    df = create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state)
-    html_table = generate_html_table(df)
-    return html_table
+    try:
+        # Convert sort_state to dict if it's a string
+        if isinstance(sort_state, str):
+            try:
+                sort_state = json.loads(sort_state)
+            except:
+                # If JSON parsing fails, create a default state
+                sort_state = {"sort_by": "Average Score", "ascending": False}
+        
+        # Ensure sort_state is a dict
+        if not isinstance(sort_state, dict):
+            sort_state = {"sort_by": "Average Score", "ascending": False}
+        
+        # Generate the data and table
+        df = create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state, search_query)
+        html_table = generate_html_table(df)
+        
+        # Get sort info with fallbacks
+        sort_col = sort_state.get("sort_by", "Average Score")
+        sort_dir = "▼" if not sort_state.get("ascending", False) else "▲"
+        
+        html_output = f"""
+        <div class="sort-info">
+            <p>Sorted by: {sort_col} {sort_dir}</p>
+        </div>
+        {html_table}
+        """
+        
+        return html_output
+    
+    except Exception as e:
+        # If anything goes wrong, return a basic table with an error message
+        print(f"Error in update_leaderboard: {str(e)}")
+        df = create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, 
+                                       {"sort_by": "Average Score", "ascending": False})
+        html_table = generate_html_table(df)
+        
+        return f"""
+        <div class="sort-info" style="color: #ff6b6b;">
+            <p>Error in sorting. Using default sort: Average Score (descending)</p>
+        </div>
+        {html_table}
+        """
 
 with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
     gr.Markdown("# 🏆 TD-EVAL Model Evaluation Leaderboard")
-    gr.Markdown("""
-    This leaderboard displays aggregated model performance across multiple evaluation metrics.
+    gr.HTML('<div class="subtitle">This leaderboard displays aggregated model performance across multiple evaluation metrics.</div>')
     
-    **Variants:**
-    - **mwoz:** Baseline variant.
-    - **tau-airline:** Airline specialty variant.
-    - **tau-retail:** Retail specialty variant.
-    
-    Use the checkboxes below to select which variants to include. At least one variant must be active.
-    """)
+    gr.Markdown('''
+    <div class="variants_container">
+      <div class="variants_title">Variants:</div>
+      - mwoz: Baseline variant.<br>
+      - tau-airline: Airline specialty variant.<br>
+      - tau-retail: Retail specialty variant.<br><br>
+      Use the checkboxes below to select which variants to include. At least one variant must be active.
+    </div>
+    ''')
     
     with gr.Row():
         cb_mwoz = gr.Checkbox(label="mwoz", value=True)
         cb_tau_airline = gr.Checkbox(label="tau-airline", value=True)
         cb_tau_retail = gr.Checkbox(label="tau-retail", value=True)
     
-    gr.Markdown("### Sort by (click a button to toggle ascending/descending):")
+    # Add search bar
+    search_input = gr.Textbox(label="Search models", placeholder="Type to filter by model name...")
+    
+    hidden_sort_state = gr.State(value={"sort_by": "Average Score", "ascending": False})
+    
+    # Add sorting buttons
+    gr.Markdown("### Sort by:")
     with gr.Row():
-        btn_avg = gr.Button("Average Score")
+        btn_avg = gr.Button("Average Score ▼")
         btn_conv = gr.Button("Conversation Consistency")
         btn_backend = gr.Button("Backend Consistency")
         btn_policy = gr.Button("Policy Completeness")
-    
-    # Initialize sort state: default sort by Average Score descending.
-    sort_state = gr.State({"sort_by": "Average Score", "ascending": False})
-    
+
     leaderboard_display = gr.HTML(label="Aggregated Model Rankings")
     
-    refresh_btn = gr.Button("🔄 Refresh Leaderboard")
+    # Function to toggle sort state and update button labels
+    def toggle_sort(column, current_state, btn_avg, btn_conv, btn_backend, btn_policy):
+        # Default new state - flip direction if same column, otherwise default to descending
+        if isinstance(current_state, dict) and current_state.get("sort_by") == column:
+            new_ascending = not current_state.get("ascending", False)
+        else:
+            new_ascending = False
+        
+        new_state = {"sort_by": column, "ascending": new_ascending}
+        
+        # Update button labels
+        direction = "▲" if new_ascending else "▼"
+        avg_label = f"Average Score {direction}" if column == "Average Score" else "Average Score"
+        conv_label = f"Conversation Consistency {direction}" if column == "Conversation Consistency" else "Conversation Consistency"
+        backend_label = f"Backend Consistency {direction}" if column == "Backend Consistency" else "Backend Consistency"
+        policy_label = f"Policy Completeness {direction}" if column == "Policy Completeness" else "Policy Completeness"
+        
+        return new_state, avg_label, conv_label, backend_label, policy_label
     
-    # Sort button events.
-    btn_avg.click(fn=sort_by_avg, inputs=[sort_state], outputs=[sort_state]).then(
+    # Connect sort buttons with the toggle function
+    btn_avg.click(
+        fn=toggle_sort,
+        inputs=[gr.Textbox(value="Average Score", visible=False), hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy],
+        outputs=[hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy]
+    ).then(
         fn=update_leaderboard,
-        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input],
         outputs=leaderboard_display
     )
-    btn_conv.click(fn=sort_by_conv, inputs=[sort_state], outputs=[sort_state]).then(
-        fn=update_leaderboard,
-        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
-        outputs=leaderboard_display
-    )
-    btn_backend.click(fn=sort_by_backend, inputs=[sort_state], outputs=[sort_state]).then(
+    
+    btn_conv.click(
+        fn=toggle_sort,
+        inputs=[gr.Textbox(value="Conversation Consistency", visible=False), hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy],
+        outputs=[hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy]
+    ).then(
         fn=update_leaderboard,
-        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input],
         outputs=leaderboard_display
     )
-    btn_policy.click(fn=sort_by_policy, inputs=[sort_state], outputs=[sort_state]).then(
+    
+    btn_backend.click(
+        fn=toggle_sort,
+        inputs=[gr.Textbox(value="Backend Consistency", visible=False), hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy],
+        outputs=[hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy]
+    ).then(
         fn=update_leaderboard,
-        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input],
         outputs=leaderboard_display
     )
     
-    # Refresh button event.
-    refresh_btn.click(
+    btn_policy.click(
+        fn=toggle_sort,
+        inputs=[gr.Textbox(value="Policy Completeness", visible=False), hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy],
+        outputs=[hidden_sort_state, btn_avg, btn_conv, btn_backend, btn_policy]
+    ).then(
         fn=update_leaderboard,
-        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input],
         outputs=leaderboard_display
     )
     
-    # Update leaderboard immediately when any checkbox changes.
-    cb_mwoz.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state], outputs=leaderboard_display)
-    cb_tau_airline.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state], outputs=leaderboard_display)
-    cb_tau_retail.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state], outputs=leaderboard_display)
-    
-    # Load initial leaderboard on app start.
-    demo.load(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state], outputs=leaderboard_display)
+    # Connect dataflow for variant checkboxes and search
+    cb_mwoz.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
+    cb_tau_airline.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
+    cb_tau_retail.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
+    search_input.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
+
+    demo.load(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
 
 if __name__ == "__main__":
     demo.launch()

styles.css

@@ -1,28 +1,108 @@
 /* General body style */
 body {
     font-family: Arial, sans-serif;
-    background-color: #2b2b2b;
+    background-color: #000000;
     margin: 20px;
 }
 
 /* Title styling for Markdown headers */
-h1, h2, h3 {
+h1, h2, h3, .subtitle, .variants_container {
     color: #cacaca;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    
+}
+
+h1 {
+    font-size: 2.125rem;
+    font-weight: 700;
+    margin-top: 2rem;
+
 }
 
+.variants_container {
+    margin: 50px auto;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 15px;
+    width: fit-content;
+    background-color: #27272A;
+}
+
+.variants_title {
+    font-size: 20px;
+    font-weight: 500;
+}
+
+
+/* table */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: none;
+    margin-top: 20px;
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+table th {
+    background-color: #27272A;
+    font-weight: bold;
+    font-size: 18px;
+    border: none;
+}
+
+/* Alternate row colors for table rows excluding the header */
+table tr:not(:first-child):nth-child(odd) {
+    background-color: #1a1a1a;
+}
+
+table tr:not(:first-child):nth-child(even) {
+    background-color: #141414;
+}
+
+table tr {
+    border: none;
+}
+
+th, td {
+    padding: 8px;
+    text-align: center;
+    border: none;
+}
+
+
 /* Button styling */
 button {
-    background-color: #007BFF;
-    color: #fff;
+    background-color: #ffbe93;
+    color: black;
     border: none;
     padding: 8px 12px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
+    transition: all 0.3s ease;
 }
 
 button:hover {
-    background-color: #0056b3;
+    background-color: #ff9955;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+/* Sort buttons */
+.sort-info {
+    color: #cacaca;
+    text-align: center;
+    margin: 10px 0;
+    padding: 5px;
+    background-color: #27272A;
+    border-radius: 5px;
+    font-size: 16px;
 }
 
 /* Styling for checkboxes and labels */
@@ -30,20 +110,31 @@ button:hover {
     margin-right: 10px;
 }
 
-/* Table styling */
-table {
+/* Search input styling */
+input[type="text"] {
+    background-color: #1a1a1a;
+    color: #cacaca;
+    border: 1px solid #3a3a3a;
+    border-radius: 5px;
+    padding: 10px;
     width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
+    margin-bottom: 15px;
+    font-size: 16px;
 }
 
-th, td {
-    padding: 8px;
-    text-align: center;
-    border: 1px solid #ddd;
+input[type="text"]:focus {
+    border-color: #ffa162;
+    outline: none;
+    box-shadow: 0 0 5px rgba(196, 193, 39, 0.5);
 }
 
-th {
-    background-color: #f2f2f2;
-    font-weight: bold;
+/* No results message */
+.no-results {
+    color: #cacaca;
+    text-align: center;
+    padding: 30px;
+    background-color: #1a1a1a;
+    border-radius: 10px;
+    font-size: 18px;
+    margin-top: 20px;
 }