No filter CSS

app.py

@@ -626,12 +626,13 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
     pending_query = gr.State(None)
 
     # Warning UI is implemented as a hidden row (to keep it simple)
-    with gr.Row(visible=False) as warning_row:
-        gr.Markdown("**No report filter selected. Are you sure you want to proceed?**")
-        with gr.Row():
-            proceed_btn = gr.Button("Proceed")
-            cancel_btn = gr.Button("Cancel")
-    
+    with gr.Row(visible=False, elem_id="warning-row") as warning_row:
+        with gr.Column():
+            gr.Markdown("<span class='warning-icon'>⚠️</span> **No report filter selected. Are you sure you want to proceed?**")
+            with gr.Row(elem_classes="warning-buttons"):
+                proceed_btn = gr.Button("Proceed", elem_classes="proceed")
+                cancel_btn = gr.Button("Cancel", elem_classes="cancel")
+
     def show_warning():
         """Show warning popup when no filters selected"""
         return gr.update(visible=True)

style.css

@@ -442,3 +442,93 @@ span.chatbot > p > img{
     min-width: 100px;
     margin: 0 5px;
 }
+
+/* Warning popup styling */
+#warning-row {
+    background-color: #fff3cd;
+    border: 1px solid #ffeeba;
+    border-radius: 4px;
+    padding: 15px 20px;
+    margin: 10px 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    position: relative;
+    z-index: 1000;
+    font-size: 14px;
+    color: #856404;
+    width: 100%;
+}
+
+/* Only apply the animation when the element is visible */
+#warning-row.visible {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+#warning-row p, #warning-row .warning-content {
+    font-weight: bold;
+    color: #856404;
+    margin: 0 0 10px 0;
+    text-align: center;
+}
+
+#warning-row .warning-icon {
+    color: #856404;
+    margin-right: 8px;
+    font-size: 1.2em;
+}
+
+#warning-row .warning-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 10px;
+    width: 100%;
+}
+
+#warning-row button {
+    min-width: 100px;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+#warning-row button.proceed {
+    background-color: #4b8ec3;
+    color: white;
+    border: none;
+}
+
+#warning-row button.proceed:hover {
+    background-color: #3a7cb0;
+}
+
+#warning-row button.cancel {
+    background-color: #e0e0e0;
+    color: #333;
+    border: 1px solid #ccc;
+}
+
+#warning-row button.cancel:hover {
+    background-color: #d0d0d0;
+}
+
+/* Dark mode support */
+body.dark #warning-row {
+    background-color: #382f22;
+    border-color: #6b5b30;
+}
+
+body.dark #warning-row p, 
+body.dark #warning-row .warning-content,
+body.dark #warning-row .warning-icon {
+    color: #ffd866;
+}
+
+body.dark #warning-row button.cancel {
+    background-color: #4a4a4a;
+    color: #e0e0e0;
+    border-color: #555;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}