recycle_bin 1.1.0 → 1.2.0

data/app/views/recycle_bin/trash/index.html.erb

@@ -1,320 +1,289 @@
-<h2>Deleted Items (<%= number_with_delimiter(@total_count) %>)</h2>
+<% content_for :title, "Deleted Items" %>
 
-<!-- Statistics Dashboard -->
-<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
-  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
-    <div style="font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 8px;"><%= number_with_delimiter(@total_count) %></div>
-    <div style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">Total Items in Trash</div>
-    <div style="font-size: 0.8rem; margin-top: 8px; color: #28a745;">
-      <%= @filtered_items.items.select { |item| item.deleted_at > 1.day.ago }.count %> deleted today
-    </div>
-  </div>
-  
-  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
-    <div style="font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 8px;"><%= @model_types.count %></div>
-    <div style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">Model Types</div>
-    <div style="font-size: 0.8rem; margin-top: 8px;">
-      <% if @model_types.any? %>
-        <%= @model_types.join(', ') %>
-      <% else %>
-        No types
-      <% end %>
-    </div>
+<!-- Page Header -->
+<div class="page-header">
+  <div class="page-title-section">
+    <h1 class="page-title">🗂️ All Items</h1>
+    <p class="page-subtitle">Browse and manage all deleted items with advanced filtering and search</p>
   </div>
-  
-  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
-    <div style="font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 8px;">
-      <%= @filtered_items.items.select { |item| item.deleted_at > 7.days.ago }.count %>
-    </div>
-    <div style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">This Week</div>
-    <div style="font-size: 0.8rem; margin-top: 8px;">
-      Recent activity
-    </div>
-  </div>
-
-  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
-    <div style="font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 8px;"><%= @current_page %> / <%= @total_pages %></div>
-    <div style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">Current Page</div>
-    <div style="font-size: 0.8rem; margin-top: 8px;">
-      Showing <%= (@current_page - 1) * @per_page + 1 %>-<%= [(@current_page * @per_page), @total_count].min %> of <%= number_with_delimiter(@total_count) %>
-    </div>
+  <div class="page-actions">
+    <%= link_to "← Back to Dashboard", recycle_bin.root_path, class: "btn btn-outline" %>
   </div>
 </div>
 
-<!-- Filters -->
-<% if @model_types.any? %>
-  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
-    <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
-      <span style="font-weight: 500; color: #495057;">Filter by type:</span>
-      <%= link_to "All", recycle_bin.root_path(page: 1), 
-                  style: "display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; #{params[:type].blank? ? 'background: #667eea; color: white;' : 'color: #495057;'}" %>
-      <% @model_types.each do |model_type| %>
-        <%= link_to model_type, recycle_bin.root_path(type: model_type, page: 1), 
-                    style: "display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; #{params[:type] == model_type ? 'background: #667eea; color: white;' : 'color: #495057;'}" %>
+<!-- Search Results Summary -->
+<% if params[:search].present? %>
+  <div class="search-summary">
+    <div class="search-summary-content">
+      <h3>🔍 <%= search_result_summary(@total_count, params[:search]) %></h3>
+      <% if @total_count > 0 %>
+        <p class="search-tip">💡 Tip: Use advanced filters to narrow down your results further</p>
       <% end %>
     </div>
-    
-    <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 15px;">
-      <span style="font-weight: 500; color: #495057;">Time:</span>
-      <%= link_to "Today", recycle_bin.root_path(time: 'today', page: 1), 
-                  style: "display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; #{params[:time] == 'today' ? 'background: #667eea; color: white;' : 'color: #495057;'}" %>
-      <%= link_to "This Week", recycle_bin.root_path(time: 'week', page: 1), 
-                  style: "display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; #{params[:time] == 'week' ? 'background: #667eea; color: white;' : 'color: #495057;'}" %>
-      <%= link_to "This Month", recycle_bin.root_path(time: 'month', page: 1), 
-                  style: "display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; #{params[:time] == 'month' ? 'background: #667eea; color: white;' : 'color: #495057;'}" %>
-    </div>
   </div>
 <% end %>
 
+<!-- Filter Breadcrumb -->
+<% if any_filters_active? %>
+  <div class="filter-breadcrumb">
+    <span class="breadcrumb-label">📋 Active Filters:</span>
+    <span class="breadcrumb-content"><%= filter_breadcrumb %></span>
+    <span class="filter-count-badge"><%= active_filter_count %></span>
+  </div>
+<% end %>
+
+<%= render 'recycle_bin/trash/stats',
+           total_count: @total_count,
+           model_types: @model_types,
+           filtered_items: @filtered_items,
+           current_page: @current_page,
+           per_page: @per_page,
+           total_pages: @total_pages %>
+
+<%= render 'recycle_bin/trash/filters', model_types: @model_types %>
+
 <% if @deleted_items.any? %>
-  <div style="background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden;">
-    
-    <!-- Bulk Actions Bar (Initially Hidden) -->
-    <div id="bulk-actions" style="display: none; background: #fff3cd; padding: 16px 20px; border-bottom: 1px solid #ffeaa7; justify-content: space-between; align-items: center;">
-      <span id="bulk-count" style="font-weight: 500; color: #856404;">0 items selected</span>
-      <div style="display: flex; gap: 8px;">
-        <%= form_with url: recycle_bin.bulk_restore_trash_index_path, method: :patch, local: true, style: "display: inline;" do |form| %>
+  <div class="main-card">
+    <div class="card-header">
+      <h3 class="card-title">
+        Deleted Items
+        <% if params[:search].present? %>
+          <span class="search-highlight">for "<%= params[:search] %>"</span>
+        <% end %>
+        (<%= number_with_delimiter(@total_count) %>)
+      </h3>
+      <div class="card-actions">
+        <!-- Export buttons -->
+        <div class="export-buttons">
+          <%= link_to "📊 CSV Export", recycle_bin.trash_index_path(format: :csv, **request.query_parameters),
+                      class: "btn btn-outline btn-sm",
+                      title: "Export current results to CSV" %>
+          <%= link_to "📄 JSON Export", recycle_bin.trash_index_path(format: :json, **request.query_parameters),
+                      class: "btn btn-outline btn-sm",
+                      title: "Export current results to JSON" %>
+        </div>
+      </div>
+    </div>
+
+    <div id="bulk-actions" class="bulk-actions">
+      <span id="bulk-count">0 items selected</span>
+      <div class="card-actions">
+        <%= form_with url: bulk_restore_trash_index_path, method: :patch, local: true do |form| %>
           <input type="hidden" id="bulk-restore-items" name="selected_items" value="">
-          <%= form.submit "↶ Restore Selected", 
-                          style: "display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;",
-                          onclick: "return handleBulkAction('restore')" %>
+          <%= form.submit "↶ Restore Selected", class: "btn btn-success btn-sm", onclick: "return handleBulkAction('restore')" %>
         <% end %>
-        
-        <%= form_with url: recycle_bin.bulk_destroy_trash_index_path, method: :delete, local: true, style: "display: inline;" do |form| %>
+        <%= form_with url: bulk_destroy_trash_index_path, method: :delete, local: true do |form| %>
           <input type="hidden" id="bulk-destroy-items" name="selected_items" value="">
-          <%= form.submit "🗑️ Delete Selected", 
-                          style: "display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;",
-                          onclick: "return handleBulkAction('destroy')" %>
+          <%= form.submit "🗑️ Delete Selected", class: "btn btn-danger btn-sm", onclick: "return handleBulkAction('destroy')" %>
         <% end %>
       </div>
     </div>
 
-    <table style="width: 100%; border-collapse: collapse;">
-      <thead>
-        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
-          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057; width: 40px;">
-            <input type="checkbox" id="select-all" style="cursor: pointer;" onchange="toggleSelectAll()">
-          </th>
-          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Type</th>
-          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Item</th>
-          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Deleted At</th>
-          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% @deleted_items.each do |item| %>
-          <tr style="border-bottom: 1px solid #dee2e6;">
-            <td style="padding: 16px;">
-              <input type="checkbox" class="item-checkbox" value="<%= item.class.name %>:<%= item.id %>" style="cursor: pointer;" onchange="updateBulkActions()">
-            </td>
-            <td style="padding: 16px;">
-              <span style="background: #667eea; color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500;">
-                <%= item.class.name %>
-              </span>
-            </td>
-            <td style="padding: 16px;">
-              <div style="font-weight: 500; color: #495057; margin-bottom: 4px;">
-                <%= link_to truncate(item.recyclable_title, length: 60), recycle_bin.trash_path(item.class.name, item.id), 
-                            style: "color: #667eea; text-decoration: none;" %>
-              </div>
-              <small style="color: #6c757d;">ID: <%= item.id %></small>
-            </td>
-            <td style="padding: 16px;">
-              <div style="font-weight: 500; color: #495057; margin-bottom: 4px;">
-                <%= time_ago_in_words(item.deleted_at) %> ago
-              </div>
-              <small style="color: #6c757d;"><%= item.deleted_at.strftime('%B %d, %Y at %l:%M %p') %></small>
-            </td>
-            <td style="padding: 16px;">
-              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-                <%= form_with url: recycle_bin.restore_trash_path(item.class.name, item.id), method: :patch, local: true, style: "display: inline;" do |form| %>
-                  <%= form.submit "↶ Restore", 
-                                  style: "display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #28a745; color: white; border: none; border-radius: 6px; text-decoration: none; font-size: 12px; font-weight: 500; cursor: pointer;",
-                                  onclick: "return confirm('Restore this #{item.class.name.downcase}?')" %>
-                <% end %>
-                
-                <%= form_with url: recycle_bin.destroy_trash_path(item.class.name, item.id), method: :delete, local: true, style: "display: inline;" do |form| %>
-                  <%= form.submit "🗑️ Delete", 
-                                  style: "display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #dc3545; color: white; border: none; border-radius: 6px; text-decoration: none; font-size: 12px; font-weight: 500; cursor: pointer;",
-                                  onclick: "return confirm('Permanently delete this #{item.class.name.downcase}? This cannot be undone!')" %>
-                <% end %>
-              </div>
-            </td>
+    <div class="table-container">
+      <table class="table">
+        <thead>
+          <tr>
+            <th class="checkbox-column"><input type="checkbox" id="select-all" onchange="toggleSelectAll()"></th>
+            <th>Type</th>
+            <th>Item</th>
+            <th>Deleted At</th>
+            <th>Size</th>
+            <th>Actions</th>
           </tr>
-        <% end %>
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          <%= render partial: 'recycle_bin/trash/item', collection: @deleted_items %>
+        </tbody>
+      </table>
+    </div>
   </div>
 
-  <!-- Pagination -->
-  <% if @total_pages > 1 %>
-    <div style="display: flex; justify-content: center; align-items: center; gap: 8px; margin: 30px 0; flex-wrap: wrap;">
-      <!-- Previous Button -->
-      <% if @current_page > 1 %>
-        <%= link_to "« Previous", recycle_bin.root_path(page: @current_page - 1, type: params[:type], time: params[:time]), 
-                    style: "padding: 8px 16px; border: 1px solid #dee2e6; color: #667eea; text-decoration: none; border-radius: 6px; font-weight: 500;" %>
-      <% else %>
-        <span style="padding: 8px 16px; border: 1px solid #dee2e6; color: #6c757d; border-radius: 6px; background: #f8f9fa;">« Previous</span>
-      <% end %>
-
-      <!-- Page Numbers -->
-      <% 
-        # Calculate page range to show
-        start_page = [@current_page - 2, 1].max
-        end_page = [@current_page + 2, @total_pages].min
-        
-        # Ensure we show at least 5 pages if available
-        if end_page - start_page < 4
-          if start_page == 1
-            end_page = [start_page + 4, @total_pages].min
-          else
-            start_page = [end_page - 4, 1].max
-          end
-        end
-      %>
-
-      <!-- First page if not in range -->
-      <% if start_page > 1 %>
-        <%= link_to "1", recycle_bin.root_path(page: 1, type: params[:type], time: params[:time]), 
-                    style: "padding: 8px 12px; border: 1px solid #dee2e6; color: #667eea; text-decoration: none; border-radius: 6px;" %>
-        <% if start_page > 2 %>
-          <span style="padding: 8px 12px; color: #6c757d;">...</span>
-        <% end %>
-      <% end %>
-
-      <!-- Page range -->
-      <% (start_page..end_page).each do |page| %>
-        <% if page == @current_page %>
-          <span style="padding: 8px 12px; background: #667eea; color: white; border-radius: 6px; font-weight: 500;"><%= page %></span>
-        <% else %>
-          <%= link_to page, recycle_bin.root_path(page: page, type: params[:type], time: params[:time]), 
-                      style: "padding: 8px 12px; border: 1px solid #dee2e6; color: #667eea; text-decoration: none; border-radius: 6px;" %>
-        <% end %>
-      <% end %>
-
-      <!-- Last page if not in range -->
-      <% if end_page < @total_pages %>
-        <% if end_page < @total_pages - 1 %>
-          <span style="padding: 8px 12px; color: #6c757d;">...</span>
-        <% end %>
-        <%= link_to @total_pages, recycle_bin.root_path(page: @total_pages, type: params[:type], time: params[:time]), 
-                    style: "padding: 8px 12px; border: 1px solid #dee2e6; color: #667eea; text-decoration: none; border-radius: 6px;" %>
-      <% end %>
+  <%= render 'recycle_bin/trash/pagination', current_page: @current_page, total_pages: @total_pages, total_count: @total_count, per_page: @per_page %>
 
-      <!-- Next Button -->
-      <% if @current_page < @total_pages %>
-        <%= link_to "Next »", recycle_bin.root_path(page: @current_page + 1, type: params[:type], time: params[:time]), 
-                    style: "padding: 8px 16px; border: 1px solid #dee2e6; color: #667eea; text-decoration: none; border-radius: 6px; font-weight: 500;" %>
+<% else %>
+  <div class="main-card">
+    <div class="empty-state">
+      <% if params[:search].present? %>
+        <div class="empty-icon">🔍</div>
+        <h4 class="empty-title">No search results found!</h4>
+        <p class="empty-subtitle">
+          No items match your search "<strong><%= params[:search] %></strong>".
+          Try adjusting your search terms or filters.
+        </p>
+        <div class="empty-actions">
+          <%= link_to "Clear Search", recycle_bin.trash_index_path, class: "btn btn-primary" %>
+          <%= link_to "View All Items", recycle_bin.trash_index_path, class: "btn btn-outline" %>
+        </div>
+      <% elsif any_filters_active? %>
+        <div class="empty-icon">📊</div>
+        <h4 class="empty-title">No items match your filters!</h4>
+        <p class="empty-subtitle">
+          Try adjusting your filter criteria or <%= link_to "clear all filters", recycle_bin.trash_index_path %>.
+        </p>
       <% else %>
-        <span style="padding: 8px 16px; border: 1px solid #dee2e6; color: #6c757d; border-radius: 6px; background: #f8f9fa;">Next »</span>
+        <div class="empty-icon">🎉</div>
+        <h4 class="empty-title">No items match your filters!</h4>
+        <p class="empty-subtitle">Try adjusting your filters or check back later for deleted items.</p>
+        <%= link_to "Clear Filters", recycle_bin.trash_index_path, class: "btn btn-primary" %>
       <% end %>
     </div>
+  </div>
+<% end %>
 
-    <!-- Per Page Options -->
-    <div style="text-align: center; margin-bottom: 20px;">
-      <span style="color: #6c757d; margin-right: 10px;">Items per page:</span>
-      <% [25, 50, 100, 250].each do |per_page_option| %>
-        <% if per_page_option == @per_page %>
-          <span style="padding: 4px 8px; background: #667eea; color: white; border-radius: 4px; margin: 0 2px; font-size: 14px;"><%= per_page_option %></span>
-        <% else %>
-          <%= link_to per_page_option, recycle_bin.root_path(page: 1, per_page: per_page_option, type: params[:type], time: params[:time]), 
-                      style: "padding: 4px 8px; border: 1px solid #dee2e6; color: #667eea; text-decoration: none; border-radius: 4px; margin: 0 2px; font-size: 14px;" %>
-        <% end %>
-      <% end %>
-    </div>
-  <% end %>
+<style>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 20px 0;
+  border-bottom: 1px solid #e9ecef;
+}
 
-  <div style="text-align: center; padding: 20px; color: #6c757d;">
-    Showing <%= (@current_page - 1) * @per_page + 1 %>-<%= [(@current_page * @per_page), @total_count].min %> of <%= number_with_delimiter(@total_count) %> items
-  </div>
+.page-title-section {
+  flex: 1;
+}
 
-<% else %>
-  <div class="empty-state">
-    <div style="font-size: 48px; margin-bottom: 20px;">🎉</div>
-    <h3>No items match your filters!</h3>
-    <p>Try adjusting your filters or check back later for deleted items.</p>
-    
-    <div style="margin-top: 30px;">
-      <%= link_to "Clear Filters", recycle_bin.root_path, 
-                  style: "display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #667eea; color: white; border-radius: 6px; text-decoration: none; font-weight: 500;" %>
-    </div>
-  </div>
-<% end %>
+.page-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #495057;
+  margin: 0 0 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 
-<script>
-// Bulk selection functionality
-function toggleSelectAll() {
-  const selectAllCheckbox = document.getElementById('select-all');
-  const itemCheckboxes = document.querySelectorAll('.item-checkbox');
-  
-  itemCheckboxes.forEach(checkbox => {
-    checkbox.checked = selectAllCheckbox.checked;
-  });
-  
-  updateBulkActions();
+.page-subtitle {
+  font-size: 16px;
+  color: #6c757d;
+  margin: 0;
+  line-height: 1.4;
 }
 
-function updateBulkActions() {
-  const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
-  const bulkActions = document.getElementById('bulk-actions');
-  const bulkCount = document.getElementById('bulk-count');
-  const selectAllCheckbox = document.getElementById('select-all');
-  
-  if (checkedBoxes.length > 0) {
-    bulkActions.style.display = 'flex';
-    bulkCount.textContent = checkedBoxes.length + ' item' + (checkedBoxes.length > 1 ? 's' : '') + ' selected';
-  } else {
-    bulkActions.style.display = 'none';
-  }
-  
-  // Update select-all checkbox state
-  const itemCheckboxes = document.querySelectorAll('.item-checkbox');
-  if (checkedBoxes.length === itemCheckboxes.length && itemCheckboxes.length > 0) {
-    selectAllCheckbox.checked = true;
-    selectAllCheckbox.indeterminate = false;
-  } else if (checkedBoxes.length > 0) {
-    selectAllCheckbox.checked = false;
-    selectAllCheckbox.indeterminate = true;
-  } else {
-    selectAllCheckbox.checked = false;
-    selectAllCheckbox.indeterminate = false;
-  }
+.page-actions {
+  display: flex;
+  gap: 12px;
 }
 
-function handleBulkAction(action) {
-  const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
-  
-  if (checkedBoxes.length === 0) {
-    alert('Please select at least one item.');
-    return false;
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
   }
   
-  const selectedItems = Array.from(checkedBoxes).map(cb => cb.value);
-  
-  // Confirmation message
-  let message;
-  if (action === 'restore') {
-    message = 'Restore ' + checkedBoxes.length + ' selected item' + (checkedBoxes.length > 1 ? 's' : '') + '?';
-  } else {
-    message = 'Permanently delete ' + checkedBoxes.length + ' selected item' + (checkedBoxes.length > 1 ? 's' : '') + '? This cannot be undone!';
+  .page-actions {
+    width: 100%;
+    justify-content: flex-start;
   }
   
-  if (!confirm(message)) {
-    return false;
+  .page-title {
+    font-size: 24px;
   }
   
-  // Set the hidden input values
-  if (action === 'restore') {
-    document.getElementById('bulk-restore-items').value = JSON.stringify(selectedItems);
-  } else {
-    document.getElementById('bulk-destroy-items').value = JSON.stringify(selectedItems);
+  .page-subtitle {
+    font-size: 14px;
   }
-  
-  return true;
 }
 
-// Initialize bulk actions on page load
-document.addEventListener('DOMContentLoaded', function() {
-  updateBulkActions();
-});
-</script>
+.search-summary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.search-summary-content h3 {
+  margin: 0 0 10px 0;
+  font-size: 1.5rem;
+}
+
+.search-tip {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 0.9rem;
+}
+
+.filter-breadcrumb {
+  background: #e3f2fd;
+  border: 1px solid #bbdefb;
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.breadcrumb-label {
+  font-weight: 600;
+  color: #1976d2;
+  font-size: 14px;
+}
+
+.breadcrumb-content {
+  color: #1565c0;
+  font-size: 14px;
+}
+
+.filter-count-badge {
+  background: #1976d2;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-left: auto;
+}
+
+.search-highlight {
+  background: #fff3cd;
+  color: #856404;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: normal;
+}
+
+.export-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.empty-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 15px;
+  justify-content: center;
+}
+
+.empty-actions .btn {
+  min-width: 120px;
+}
+
+@media (max-width: 768px) {
+  .search-summary-content h3 {
+    font-size: 1.2rem;
+  }
+
+  .filter-breadcrumb {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .filter-count-badge {
+    margin-left: 0;
+    align-self: flex-start;
+  }
+
+  .empty-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>