/* Make dropdown buttons narrower on mobile to fit screen */
@media only screen and (max-width: 480px) {
  /* Override the min-width from filter-dropdowns.css */
  .filter-dropdown,
  .timerange-dropdown,
  #filter-dropdown,
  #timerange-dropdown,
  .sort-controls select {
    min-width: auto !important;
    width: auto !important;
    max-width: 130px !important;
    font-size: 11px !important;
    padding: 5px 20px 5px 8px !important;
  }
  
  /* Adjust the filters row to fit */
  .filters-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 8px !important;
  }
  
  /* Make sort label smaller */
  .sort-by-label {
    font-size: 12px !important;
    margin-right: 5px !important;
  }
  
  /* Ensure sort controls don't overflow */
  .sort-controls {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* If dropdowns still don't fit, stack them */
  @media only screen and (max-width: 360px) {
    .filters-row {
      flex-direction: column !important;
      align-items: center !important;
    }
    
    .filter-dropdown,
    .timerange-dropdown {
      width: 100% !important;
      max-width: 200px !important;
      margin-bottom: 5px !important;
    }
  }
}