.common-filter-container {
  padding: 15px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;

    h4 {
      margin: 0;
      color: #333;
      flex: 1;
    }
    
    .btn {
      white-space: nowrap;
    }
  }

  .presets-section {
    margin-bottom: 15px;
    
    .preset-controls {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      
      select {
        flex: 1;
        min-width: 150px;
      }
      
      .btn {
        white-space: nowrap;
      }
    }
  }

  .save-preset-section {
    margin-bottom: 15px;
    
    .clr-input-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      
      .clr-input {
        flex: 1;
        min-width: 150px;
      }
      
      .clr-input-group-btn {
        .btn {
          white-space: nowrap;
        }
      }
    }
  }

  .filters-form {
    .filters-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 15px;
      
      .filter-item {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        
        .filter-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          .filter-label {
            font-weight: bold;
            color: #333;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        
        .filter-type-select {
          width: 100%;
          margin-bottom: 10px;
        }
        
        .clr-form-control {
          margin-bottom: 10px;
          
          input, select, textarea {
            width: 100%;
            min-width: 0; // Allow flexbox to shrink items
          }
        }
        
        .date-range-controls {
          display: flex;
          gap: 10px;
          flex-direction: column;
          
          .clr-form-control {
            flex: 1;
          }
          
          @media (min-width: 480px) {
            flex-direction: row;
          }
        }
        
        .toggle-control {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
        }
        
        .multiselect {
          height: 100px;
        }
      }
    }
  }

  .no-filters {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
  }
}

// Responsive design for smaller screens
@media (max-width: 768px) {
  .common-filter-container {
    padding: 10px;
    
    .filters-form {
      .filters-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    
    .filter-header {
      flex-direction: column;
      align-items: stretch;
    }
    
    .presets-section {
      .preset-controls {
        flex-direction: column;
      }
    }
    
    .save-preset-section {
      .clr-input-group {
        flex-direction: column;
      }
    }
  }
}

@media (max-width: 480px) {
  .common-filter-container {
    .date-range-controls {
      flex-direction: column;
    }
    
    .filter-item {
      padding: 10px;
    }
  }
}