/* custom_admin.css (Corrected for your theme) */

#result_list tbody tr {
  /* Create space for the border to appear smoothly */
  border-left: 3px solid transparent; 

  /* Animate the properties that will change on hover */
  transition: background-color 0.2s ease-in-out, border-left-color 0.15s ease-in-out;
}

/* 2. Define the hover state.
   - The background color is now applied with !important to ensure it overrides
     the alternating "zebra-stripe" colors on ALL rows.
   - The transparent border is given a color, making it appear.
*/
#result_list tbody tr:hover {
  /* A nice, subtle hover color for dark themes. This will now work on all rows. */
  background-color: rgba(71, 85, 105, 0.15) !important; 
  
  /* The primary color for the border. A pleasant blue is a good default. */
  border-left-color: #3b82f6; 
}

/* 3. Make the main link in the row more prominent on hover.
   - This improves user feedback by highlighting the primary clickable action.
*/
#result_list tbody tr:hover a {
  /* Make the link text brighter on hover for better visibility */
  color: #7393c7 !important;
}

.dark #result_list tbody tr:hover {
  /* A subtle dark background that's visible on the dark theme. */
  background-color: rgba(71, 85, 105, 0.3) !important;
}

/* For dark mode, use a brighter link color for contrast against the darker hover background. */
.dark #result_list tbody tr:hover a {
  color: #a5c8ff !important;
}

/* 1. Define the keyframe animation (no change here) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Style the table rows for animation */
/* Initially hide the rows in the results table.
   We now target the table by its ID, #result_list, which is present in your HTML. */
#result_list tbody tr {
  opacity: 0;
}

/* When the .animate-rows class is added to the form, apply the animation to the rows
   inside the #result_list table. */
.animate-rows #result_list tbody tr {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* 3. Create a staggered delay for the first few rows (no change here) */
/* This gives a nice "unfolding" effect */
.animate-rows #result_list tbody tr:nth-child(1) { animation-delay: 0.03s; }
.animate-rows #result_list tbody tr:nth-child(2) { animation-delay: 0.06s; }
.animate-rows #result_list tbody tr:nth-child(3) { animation-delay: 0.09s; }
.animate-rows #result_list tbody tr:nth-child(4) { animation-delay: 0.12s; }
.animate-rows #result_list tbody tr:nth-child(5) { animation-delay: 0.15s; }
.animate-rows #result_list tbody tr:nth-child(6) { animation-delay: 0.18s; }
.animate-rows #result_list tbody tr:nth-child(7) { animation-delay: 0.21s; }
.animate-rows #result_list tbody tr:nth-child(8) { animation-delay: 0.24s; }
.animate-rows #result_list tbody tr:nth-child(9) { animation-delay: 0.27s; }
.animate-rows #result_list tbody tr:nth-child(10) { animation-delay: 0.3s; }
.animate-rows #result_list tbody tr:nth-child(11) { animation-delay: 0.33s; }
.animate-rows #result_list tbody tr:nth-child(12) { animation-delay: 0.36s; }