/* Fix filter dropdowns on mobile phones */
@media only screen and (max-width: 480px) {
  /* Force timerange dropdown to be visible */
  #timerange-dropdown,
  .timerange-dropdown,
  .timerange-dropdown-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }
  
  /* Make filters wrap and stack */
  .filters-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  
  /* Remove the separator and divider on mobile */
  .filter-separator,
  .sort-controls::before {
    display: none !important;
  }
  
  /* Make label full width to force dropdowns to next line */
  .sort-by-label {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  
  /* Make dropdowns responsive */
  .filter-dropdown-wrapper,
  .timerange-dropdown-wrapper {
    flex: 1 1 45% !important;
    min-width: 120px !important;
  }
  
  .filter-dropdown,
  .timerange-dropdown {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* For very small screens, stack everything vertically */
@media only screen and (max-width: 360px) {
  .filter-dropdown-wrapper,
  .timerange-dropdown-wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  
  .filter-dropdown,
  .timerange-dropdown {
    width: 100% !important;
  }
}